I have 2 random numbers being generated determined by the user input. I then have a box where you enter your answer to the addition problem, but it does not show whether you are right or not.
I've tried changing the buttons and what kind of message they output.
<html>
<head>
<title>Math</title>
<h1>Math Questions<h1/>
<link href="Style.css" rel="stylesheet">
<script type="text/javascript">
function RandomNum1() {
var low = parseFloat(document.getElementById("Low").value);
var high = parseFloat(document.getElementById("High").value);
var Random;
Random = Math.floor((Math.random()*high )+ low);
document.getElementById("output").innerHTML = Random;
}
function RandomNum2() {
var low2 = parseFloat(document.getElementById("Low").value);
var high2 = parseFloat(document.getElementById("High").value);
var Random2;
Random2 = Math.floor((Math.random()*high2 )+ low2);
document.getElementById("output2").innerHTML = Random2;
}
function Answer(userGuess) {
var answer = Random+Random2;
if (userGuess==answer) {
document.getElementById("outMsgBox").innerHTML="You are correct!!!";
} else {
document.getElementById("outMsgBox").innerHTML="Sorry, try again. :(";
}
}
</script>
</head>
<body>
<p>Enter the range of numbers you would like. <br />
Minimum <input type="numeric" id="Low" size="10" value="" /> <br />
Maximum <input type="numeric" id="High" size="10" value="" />
</p>
<input type="button" value="Generate First " onclick="RandomNum1();" hr="" /> <input type="button" value="Generate Second" onclick="RandomNum2();" hr="" />
<p><div id="output" type="numeric"></div>+<div class="OutputBox" id="output2" type="numeric"></div></p>
<p>Enter your answer here. <input type=numeric id="userGuess" min="1" max="1000"/> </p>
<input type="button" style="background-color:lightgreen" value="Check Answer" onclick="Answer(document.getElementById('userGuess').value);"/>
<div id="outMsgBox" style="border-style:groove; border-color:green"></div>
</body>
</html>
It's supposed to show if you answered right or not but it does not show anything when you click "check answer".
The problem is that you are declaring the variables Random, Random2 as a local variable.
Try placing this line at the start of the script
var Random, Random2;
This will define them as global variables, which means any part of your script can acces the variables. You then need to remove the definitions for the variables var Random and var Random2from the functions so you don't override the global variables.
Related
<!DOCTYPE html>
<html>
<head>
<script>
function printMultiples() {
var num = parseFloat(document.getElementById("num").value);
var Multiples = 1;
var MultiplesDiv = document.getElementByid("Multiples");
MultiplesDiv.innerHTML = "";
var multipleCount:document.getElementByid("multipleCount");
while (num = 0; n < multipleCount; n++)
}
</script>
</head>
<body>
<div>
<h3>
Print <input type="text" id="multipleCount" value="10" /> multiples of
<input type="text" id="factor" value="5" /> <br /><br />
<input
type="button"
size="10"
value="Calculate"
onclick="printMultiples();"
/>
</h3>
</div>
<div id="multipleOutput"></div>
</body>
</html>
Ok so the goal here is to make it so that when I enter a value into the textboxes of multipleCount and value, that it takes the value box and then continues to multiply it by 2 for a number of times. The amount of times is specified by the multipleCount. The problem I am having is I am unsure as to how to continue from this point forward. I am relatively new to coding and not sure how to finish this segment off. I already have the portion so that it will clear the values and replace them with the new ones every time I press the button, now I just need it to actually output the values.
I need to create code which automatticaly calculates the circumference when the length and width are entered in two different boxes.
I managed to do so, but I want the answer to appear underneath the "calculate" button, but the answer will make the button and boxes disappear. Could someone tell me what I need to change?
Here is my code:
<!DOCTYPE html>
<html>
<body>
<form>
Width:<br>
<input id="Width" type="text" name="Width">
<br>Length<br>
<input id="Length" type="text" name="Length">
<br><br>
<input type="button" value="Calculate circumference" onclick="doMath()">
</form>
<script>
function doMath() {
var Width1 = document.getElementById('Width').value;
var Length1 = document.getElementById('Length').value;
var Circ = parseInt(Width1) + parseInt(Width1) + parseInt(Length1) + parseInt(Length1);
document.write(Circ);
}
</script>
</body>
</html>
Do not use document.write function. The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML. Create a paragraph tag and give an id and place your result in that paragraph.
<!DOCTYPE html>
<html>
<body>
<form>
Width:<br>
<input id="Width" type="text" name="Width">
<br>Length<br>
<input id="Length" type="text" name="Length">
<br><br>
<input type="button" value="Calculate circumference" onclick="doMath()">
<p id="result">
</p>
</form>
<script>
function doMath() {
var Width1 = document.getElementById('Width').value;
var Length1 = document.getElementById('Length').value;
var Circ = parseInt(Width1) + parseInt(Width1) + parseInt(Length1) + parseInt(Length1);
//document.write(Circ);
document.getElementById("result").textContent = Circ;
}
</script>
</body>
</html>
Try adding a black paragraph to the html and then use document.getElementById("").innerHTML to change the text inside of it.
<html>
<head>
<title>JavaScript - using function</title>
<script>
function add(){
var value1=document.getElementById("n1").value;
var value2=document.getElementById("n2").value;
document.getElementById("result").value=parseFloat(value1)+parseFloat(value2);
}
</script>
</head>
<body>
<label>First Number:<input type="number" id="n1"/></label>
<label>Second Number:<input type="number" id="n2"/></label>
<input type="button" value="Add" onClick="add()" />
<p>
Result = <span id="result" ></span>
</p>
</body>
</html>
I am new to JavaScript and wanted to create a script that add numbers up. After pressing "Add" button, I cannot get the result to be displayed. How to get the result displayed?
Two things wrong here...
1)
<input type="button" value="Add" /> change it to
<input type="button" value="Add" onclick="add()" />
Also,
2)
document.getElementById("result").value=parseFloat(value1)+parseFloat(value2);
to
document.getElementById("result").innerHTML=parseFloat(value1)+parseFloat(value2);
PS : This is not a assignment solving website :P
First, You Should Change
document.getElementById("result").value = value1 + value2
To This:
document.getElementById("result").innerHTML = n1 + n2
Because value stands for the attribute value for < input >, not the text written
in the tag.
Second, Change The Button Code To:
<input type="button"value="Add"onclick="add()">
This "onclick" is something called event in javascript,
It means at clicking on the button "Add" it performs the funtion called "add()".
If You Are New To Javascript You Will Know Everything.
Just Be Patient.
It worked with the following changes
-> calling add function with onclick event
-> using innerhtml in place of value
<html>
<head>
<title>JavaScript - using function</title>
<script>
function add(){
var value1=document.getElementById("n1").value;
var value2=document.getElementById("n2").value;
console.log(value1,value2)
document.getElementById("result").innerHTML=parseFloat(value1)+parseFloat(value2);
}
</script>
</head>
<body>
<label>First Number:<input type="number" id="n1"/></label>
<label>Second Number:<input type="number" id="n2"/></label>
<input type="button" value="Add" onclick="add()"/>
<p>
Result = <span id="result" ></span>
</p>
</body>
</html>
Hope this helps
Its better to put the js at the end of the document - also as noted the onclick handler needs to call the function. I also tidied up the code a little.
<html>
<head>
<title>JavaScript - using function</title>
<style>label{display:block}</style>
</head>
<body>
<label>First Number:<input type="number" id="n1"/></label>
<label>Second Number:<input type="number" id="n2"/></label>
<input type="button" value="Add" onclick="add()">
<p>Result = <span id="result" ></span></p>
<script>
function add(){
var value1=parseFloat(document.getElementById("n1").value);
var value2=parseFloat(document.getElementById("n2").value);
var total= value1 + value2;
document.getElementById("result").innerText=total;
}
</script>
</body>
</html>
I need to add 2 values together and display answer in 3rd textbox however I keep getting NAN in the 3rd text box. Any help ? Here is my code:
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1></h1>
<form name="Calcultor" Method="Get" id='form1'>
First Number: <input type="text" name="fnum" size="35" id="first"> + Second Number: <input type="text" name="snum" size="35" id="sec"><br>
<br>
Answer:<input type="text" name="ans" size="35" id="ans" /> <button type="button" onclick="Calculate();">Calculate</button>
</form>
<script lang="javascript">
function Calculate()
{
var first = document.getElementById('first').value;
var last = document.getElementById('sec').value;
document.getElementById('ans').value=parseInt(first) + parseInt(sec);
document.form1.submit();
}
</script>
</body>
You are using wrong variable name by using "sec" instead of "last"
You are storing the value in "last"
var last = document.getElementById('sec').value;
And accessing as parseInt(sec). As sec is not defined anywhere in your script the value of sec becomes undefined you and thus are getting NaN.
Here is the correct code,
function Calculate()
{
var first = document.getElementById('first').value;
var last = document.getElementById('sec').value;
document.getElementById('ans').value=parseInt(first) + parseInt(last);
document.form1.submit();
}
Here is a demo
There is a typo -- you add sec but really want last:
document.getElementById('ans').value=parseInt(first) + parseInt(last);
Amount
<script type="text/javascript">
<!--
function interestVal()
{
var x = document.Amounts.valOfCar.value;
var y = document.Amounts.interestofCar.value;
var z = x+y;
document.Amounts.carInterest.value=z;
}
-->
</script>
</head>
<body background="bg.jpg">
<p>Calculate the cost of your car</p>
<form name = Amounts>
<p>Value of a car <input type="text" value="" name=valOfCar></p>
<p>Interest #15% <input type="text" value="" name=interestofCar></p>
<p>Value + Interest<input type="text" name=carInterest></p>
<p><input type=submit value=Calculate onClick=interestVal()></p>
</form>
</body>
Here you go. I was able to reproduce your problem by just copying your code and running it. This code will run. The principal change I made, which I believe was the source of the problem, was altering from an input of type submit to a button. As a submit, it was doing a postback, which caused the contents of the controls to disappear. Using a button avoids the postback.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
<!--
function interestVal() {
var x = document.Amounts.valOfCar.value;
var y = document.Amounts.interestofCar.value;
var z = x * y;
document.Amounts.carInterest.value = z;
}
-->
</script>
</head>
<body background="bg.jpg">
<p>Calculate the cost of your car</p>
<form name = "Amounts">
<p>Value of a car <input type="text" name="valOfCar" /></p>
<p>Interest #15% <input type="text" name="interestofCar" /></p>
<p>Value + Interest<input type="text" name="carInterest" /></p>
<p><button type="button" onclick="interestVal();" >Calculate</button></p>
</form>
</body>
</html>
Another potential problem is that by summing x and y, you get their concatenated result, which is probably not what you want. I have changed that to multiplying x times y.
Finally, I have enclosed many of the attribute values in quotes and made the inputs self-closing by ending the with /> instead of >.