(sqrt) √ function: Javascript/HTML help

jcrew

Solid State Member
Messages
13
Location
US
I developed a calculator but cannot get the (sqrt) "√" function key to work properly.

Can someone help me with this? Here is the calculator..........file:///C:/Users/twhecht68/Desktop/Calculator/calculator.html


<!DOCTYPE html>
<head>
<title>Calculator</title>
<link rel="stylesheet" href="style4.css" title="calculator.html"/>
<script type="text/javascript">


function myFunction() {
document.getElementById("demo").innerHTML = Math.sqrt();
}
function c(val)
{
document.getElementById("d").value=val;
}
function v(val)
{
document.getElementById("d").value+=val;
}
function e()
{
try
{
c(eval(document.getElementById("d").value))
}
catch(e)
{
c('Error')
}
}

</script>

</head>
<body>

<div id="container">
<h1>Todd's Calculator</h1>
</div>

<div class="box">
<div class="display"><input type="text" readonly size="18" id="d"/></div>
<div class="keys">

<!--------------1st row-------------------------->
<p><input type="button" class="button gray"
value="√" id="demo" onclick='v("√")'>


<input type="button" class="button gray"
value = "mr" onclick='v("mr")'>

<input type="button" class= "button gray"
value = "mc" onclick='v("mc")'></p>


<!-------------2nd row--------------------------->
<p><input type="button" class="button gray"
value="%" onclick='v("%")'>
<input type="button" class="button gray"
value="m+" onclick='v("m+")'>

<input type="button" class= "button gray"
value = "m-" onclick='v("m-")'>

<input type ="button" class="button magenta"
value="/" onclick='v("/")'></p>

<!-------------3rd row--------------------------->
<p><input type="button" class="button black"
value="7" onclick='v("7")'>

<input type="button" class="button black"
value="8" onclick='v("8")'>

<input type="button" class="button black"
value="9" onclick='v("9")'>

<input type="button" class = "button magenta"
value="*" onclick='v("*")'></p>
<!--------------4th row-------------------------->
<p><input type="button" class="button black"
value="4" onclick='v("4")'>

<input type="button"class="button black"
value="5" onclick='v("5")'>

<input type="button" class="button black"
value="6" onclick='v("6")'>

<input type="button" class="button magenta"
value="-" onclick='v("-")'></p>
<!---------------5th row------------------------>
<p><input type="button" class= "button black"
value="1" onclick='v("1")'>

<input type="button" class="button black"
value="2" onclick='v("2")'>

<input type="button" class="button black"
value="3" onclick='v("3")'>

<input type="button" class="button magenta"
value="+" onclick='v("+")'></p>

<!---------------6th row------------------------->
<p><input type="button" class="button black"
value="0" onclick='v("0")'>

<input type="button" class="button black"
value="." onclick='v(".")'>

<input type="button" class="button red"
value="C" onclick='c("")'>

<input type="button" class="button green"
value="=" onclick='e()'></p>

</div>
</div>

</body>
</html>
 
in order to use the root function you must pass it a value.

it doesn't matter if that value is a static number

res = math.sqrt(9)

or a variable

var x = 3;
var y = 3;
var z = x*y;
var res = math.sqrt(z);


many more of your function names won't be allowed either. ( . * / -)
 
Root,


I can attach a value and variable to my code which will make the sqrt function work. However, the function works only outside of the calculator display and directly onto the box.
Here are the two lines of code.


<p><input type="button" class="button gray"
value="√" id="demo" onclick='v("√")'>




The new problem I am having is putting the new code below into this line of code above.


<input type="text" id="txtNumber" /></p>

<p><input type="button" id="btnSubmit" value="Calculate square root" /></p>

<p id="result"></p>




Here is the javascript code I used to make it work.
function init()

{

var myButton = document.getElementById("btnSubmit");
myButton.onclick = displaySquare;

}

onload = init;

function displaySquare()

{

var inputVal = parseInt(document.getElementById("txtNumber").value);
var result = document.getElementById("result");
var resultMessage = "";

if (isNaN(inputVal))
{

alert("Please, enter a number");

}
else

{
var squareVal = calculateSquare(inputVal);


if (squareVal)

{
resultMessage = "Square root of " + inputVal + " is " + squareVal;

}

else

{
resultMessage = "Sorry, an error occurred";

}

}
result.innerHTML = resultMessage;

}
function calculateSquare(input)

{
var squareVal = Math.sqrt(input);
return squareVal;

}
 
I think two things at the moment.

First, posting snippets of code isn't really that helpful, without an explanation.

second, I don't think you've thought about how a calculator works internally.


Here is are a couple of simple question about your calculator.

How are you entering the number 11? (by pressing the 1 button twice?)
Are you displaying this in a "screen" like a normal calculator?


What it really comes down to is.
In my opinion, the biggest problem is the way that you're thinking about the problem. -if you had a clear picture of how the "machine" works, then it'd be a lot easier.

Perhaps you should have a flow chart to help organise things?

by the time you press the square root button, you should already have the variable saved in a place (as a global variable) that you can just use.



If you want I can take you through step by step creating a calculator in javascript, but, that may involve you modifying your code extensively to fit in with the example.
 
Root,
Good points.


I took bits and parts of code and learned how to code from online tutorials to build the skeleton in HTML5. I then mapped out on paper which buttons, display, and structure I wanted to include. Then I learned CSS and figured out how to add the colors. Next, I created functions I learned from tutorials, websites, and books to make it work. I thought it would be easier ----- but logic, variables, and functions has its limits---or the beginner programmer has its limits. I am in over my head.
You are right I have to know the internals of the calculator. A flow chart would be helpful.
In HTML5 I broke it down by rows. In Javascript I created functions and assigned specific variables to make the buttons and math functions work properly.
I have tried to develop a function, used other programmers functions, learned from tutorials and more books---on how to get that sqrt rt to actually work correctly in the display window.
The calculator looks like a basic calculator with a gray display and if I type in "11" I have to type "1" "1" separately.


The sqrt root is the most challenging aspect of this calculator. There is no specific segment that will work. I have tried various functions () and math sqrt(9) and simpler functions, tested it over and over but---the sqrt either either works off the skeleton or it won't display correctly.
 
Well, you have my best wishes for trying to take on such a difficult project. This really is how you learn. At best, you have already learned a lot, even through failure. It will not be clear yet, but think back to where you started, and you will see what I mean.
 
Ok,
(I haven't really thought about and planned this as well as I'd have liked), but here goes...

I'm not suggesting that you "have" to use the same tools as I do. and indeed it may be strangely more confusing if you do.

I use a text editor called "turbopad" the reason that I use it is because it's fast, it's free and it highlights context.
(so different words are different colours) page elements are dark blue, comments light blue, properties (like type=) are highlighted green, then the proterty value type=... ("button") are purple.

using something like that is going to show up typo's, forgetting to close a quote is going to lead to following text not looking right. so this can be helpful, especially when you;re trying to figure out why something won't work.

it's also got context highlighting for loads of launguages, so, pretty easy to use the same tool regardless of whether you're making HTML, javascript, java, PHP, assembler, C, VB SQL etc. so the same tool can be used for lots of jobs.

It is perfectly possible to create wonderful looking sites in notepad, with just black text on a white background, (it's how I learned), and perfectly possible to create sites in vi over SSH. but fair to say that it is difficult.

basically, what I'm saying is get a decent editor, that you are comfortable with. because -especially whilst you're learning, you'll be using it a lot.

but don't let your editor rule you or become a crutch. I've seen plenty of "web designers" who could not understand HTML, couldn't create anything past what their graphical editor could do for them. if you took away their crutch (their particular program of choice) they weren't just inconvenienced, they just could no longer create sites, they had no idea!


That said, on with making this calculator.

You need to think about a calculator and what it does, and what resources you need to get the job done.

at the start you're going to need some kind of page to start with, so first lets just rough out a broad framework of an HTML page.
you know that you're making a calculator, and that it's going to involve some kind of javascript.

you know that calculators have buttons and a screen.

and you know that when you click those buttons you;re going to want something to happen, and in order to make that happen you'll use the "onclick" even to fire off a function

we'll make a "simple" calculator first, then add more advanced functions in later.

So here is the first "page"

Code:
<html>
<head>
    <title>jsCalc</title>
</head>
<body>
<script>
<!-- scripty stuff goes here -->
</script>
<!-- make a screen and give it an ID so that it can be referenced by the Javascript -->
<p id="screen"></p>
<br>
<button type="button" onclick="nothing_yet()">7</button>
<button type="button" onclick="nothing_yet()">8</button>
<button type="button" onclick="nothing_yet()">9</button>
<button type="button" onclick="nothing_yet()">*</button>
<br>
<button type="button" onclick="nothing_yet()">4</button>
<button type="button" onclick="nothing_yet()">5</button>
<button type="button" onclick="nothing_yet()">6</button>
<button type="button" onclick="nothing_yet()">/</button>
<br>
<button type="button" onclick="nothing_yet()">1</button>
<button type="button" onclick="nothing_yet()">2</button>
<button type="button" onclick="nothing_yet()">3</button>
<button type="button" onclick="nothing_yet()">+</button>
<br>
<button type="button" onclick="nothing_yet()">0</button>
<button type="button" onclick="nothing_yet()">.</button>
<button type="button" onclick="nothing_yet()">=</button>
<button type="button" onclick="nothing_yet()">-</button>

</body>
</html>

I've included some comments in the html these are denoted by:

<!-- comment -->

especially whilst you;re learning you should use comments to remind yourself why you have done something, or why you chose not to do something some other way that might look obvious but just not work.

it's fair to say that "in real life" you may have chosen a different button order, and a different layout, you'd have used CSS to make all the buttons the same size and control the layout. you'd have made them different colours.

but, first lets get a working calculator and make it pretty later on.



(I'm breaking this up into lots of different posts. and they'll be posted probably over a few days, if you want me to go back over anything, or want something explained in some more details etc then let me know.)
 
So, I said that you need to think about how a calculator works,

in some ways its pretty simple,

the screen starts off with a zero on it.
when you press a button a value gets displayed on the screen.

so lets get that working first of all.

since we're looking at how to get numbers input into the calculator it makes sense to call the function input, and to pass the data that we wish to "input".

what will happen is that as a button is pressed the calculator will receive that value, store it in a register.

and then display that register.


Code:
<html>
<head>
    <title>jsCalc</title>
</head>
<body>
<script>
<!-- create a register for putting the inputted data into -->
var register_a;
<!-- zero that register (don't leave it as a random value) -->
register_a = 0;
<!-- input function for taking data inputs -->
function input(num) {
register_a = num;
document.getElementById("screen").innerHTML = register_a;
}

</script>
<!-- make a screen and give it an ID so that it can be referenced by the Javascript -->
<p id="screen">0</p>
<br>
<button type="button" onclick="input(7)">7</button>
<button type="button" onclick="input(8)">8</button>
<button type="button" onclick="input(9)">9</button>
<button type="button" onclick="nothing_yet()">*</button>
<br>
<button type="button" onclick="input(4)">4</button>
<button type="button" onclick="input(5)">5</button>
<button type="button" onclick="input(6)">6</button>
<button type="button" onclick="nothing_yet()">/</button>
<br>
<button type="button" onclick="input(1)">1</button>
<button type="button" onclick="input(2)">2</button>
<button type="button" onclick="input(3)">3</button>
<button type="button" onclick="nothing_yet()">+</button>
<br>
<button type="button" onclick="input(0)">0</button>
<button type="button" onclick="input('.')">.</button>
<button type="button" onclick="nothing_yet()">=</button>
<button type="button" onclick="nothing_yet()">-</button>

</body>
</html>
 
you'll notice that if you press 1, a 1 appears in the screen.
then if you press 2 the 1 disappears and is replaced by a 2.

there are a few improvements that can be made to the code to make it a bit more readable first.

Code:
<!-- create a register for putting the inputted data into -->
var register_a;
<!-- zero that register (don't leave it as a random value) -->
register_a = 0;
doesn't need to be that long, it could just be
Code:
<!-- register storing input data -->
var register_a = 0;


Then there is the issue that rather than numbers being concatenated and displayed side by side, they are just replaced.

so let's look at some code to catenate data.
there are a couple of ways of doing this is Java one is to use the concat function, another is to use the + sign,

so
Code:
string1 + string2 => string1string2
of course in numbers it's not that simple
Code:
2 + 2
will display 4,
so putting an empty text part before it forces it to construct the numbers like a sentence.

Code:
register_a = "" + register_a + num;

So the complete code now becomes

Code:
<html>
<head>
    <title>jsCalc</title>
</head>
<body>
<script>
<!-- register storing input data -->
var register_a = 0;
<!-- input function for taking data inputs -->
function input(num) {
register_a = "" + register_a + num;
document.getElementById("screen").innerHTML = register_a;
}


</script>
<!-- make a screen and give it an ID so that it can be referenced by the Javascript -->
<p id="screen">0</p>
<br>
<button type="button" onclick="input(7)">7</button>
<button type="button" onclick="input(8)">8</button>
<button type="button" onclick="input(9)">9</button>
<button type="button" onclick="nothing_yet()">*</button>
<br>
<button type="button" onclick="input(4)">4</button>
<button type="button" onclick="input(5)">5</button>
<button type="button" onclick="input(6)">6</button>
<button type="button" onclick="nothing_yet()">/</button>
<br>
<button type="button" onclick="input(1)">1</button>
<button type="button" onclick="input(2)">2</button>
<button type="button" onclick="input(3)">3</button>
<button type="button" onclick="nothing_yet()">+</button>
<br>
<button type="button" onclick="input(0)">0</button>
<button type="button" onclick="input('.')">.</button>
<button type="button" onclick="nothing_yet()">=</button>
<button type="button" onclick="nothing_yet()">-</button>

</body>
</html>
 
Back
Top Bottom