result of input box times 2 appears in window not div - javascript

I'm trying to get a text box where you can enter a number and then you click the button and it will multiply it by two and display that result in theDiv. Right now, it opens a new page for the result, and displays the entered number, not the number times two. What am I doing wrong? Beginner here, please be gentle! Thank you!!
<html>
<script>
function doubleit()
{
var theNumber=document.write(parseFloat(document.getElementById('theInput').value));
var doubleNumber =document.getElementById('theNumber')*2;
document.getElementById('theDiv').innerHTML(document.getElementById('doubleNumber'))
}
</script>
<body>
<p>Value: <input type="text" id="theInput" value="" size=10>
<input type="button" id="theButton" value="click me!" onclick="doubleit()"></p>
<div id="theDiv"></div>
</body>
</html>

It's the call to document.write that is replacing the page. Remove it:
var theNumber=parseFloat(document.getElementById('theInput').value);
When you want the value of a variable, you shouldn't use document.getElementById:
var doubleNumber = theNumber * 2;
innerHTML is a property, not a method:
document.getElementById('theDiv').innerHTML = doubleNumber;

var doubleNumber = Number(theNumber, 10)*2;
document.getElementById('theDiv').innerHTML(doubleNumber);

Something like this
function doubleit()
{
var theNumber=parseFloat(document.getElementById('theInput').value) * 2;
document.getElementById('theDiv').innerHTML = theNumber;
}

Try This Solution :
Use the id of your button to call the function to calculate result.
theButton.onclick = function doubleit()
{
//Simply get the number from user and parse it as float.
var theNumber=parseFloat(document.getElementById('theInput').value);
//Multiply it with 2
var doubleNumber =theNumber*2;
//Display the result in another div
document.getElementById('theDiv').innerHTML = doubleNumber;
}
Demo

Related

How can I display the input value?

I would like to show what I write in the input, but everytime I try the alert window shows "undefined".
This is the code.
Thanks.
<body>
<input id="input"></input>
<button id="search">search</button>
<script>
document.getElementById('search').addEventListener("click", show);
var input = getElementById('input');
var search = input.value;
function show() {
alert(search);
}
</script>
</body>
First you need to use document.getElementById instead of just getElementById.
Then you need to put var search = input.value inside the show function so that it gets the current value each time you want to show it, and not just the initial one.
document.getElementById('search').addEventListener("click", show);
var input = document.getElementById('input');
function show() {
var search = input.value;
alert(search);
}
<input id="input"></input>
<button id="search">search</button>
you must bring var search into show function declaration in order to get new value of search box every time the event occurs.
function show(){
var search = input.value;
alert(search);
}

Add new user data to div

I am trying to learn JavaScript. I have a question which might sound silly, but I would really appreciate the help.
I have the following code:
JavaScript
<script type="text/javascript">
function fn(){
var Name = document.getElementById('name').value;
document.getElementById('result').innerHTML = Name;
}
</script>
HTML:
<body>
<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div>
<p id="result"></p>
</div>
</body>
I want to save every entry in of my textbox. Right If I am trying enter a new data input box, it replaces the previous data.
This will solve your problem;
<script type="text/javascript">
function fn(){
var Name = document.getElementById('name').value;
document.getElementById('result').innerHTML += Name;
}
</script>
notice the += instead of =;
it will get the previous value first, then add the new value to the end of it;
same as:
document.getElementById('result').innerHTML = document.getElementById('result').innerHTML + Name;
In your JavaScript code only the last attempt is saved. To save all the attempts try the following:
<script type="text/javascript">
function fn(){
var Name = document.getElementById('name').value;
document.getElementById('result').innerHTML += Name +'<br/>';
}
</script>
Every time button is clicked it will add new line symbol and new value to your result area, not relace previous try.

Javascript Random Number Generator comes up with NaN

I am trying to make a random number generator using a form. When you press the button, and enter in the maximum number, it comes up with a dialog box reading NaN, when it is meant to come up with the random number.
I have some code that looks like this:
<html>
<head>
</head>
<body>
<form name="gen">
<h1>Random Number Generator</h1>
<b>Number:</b> 1 to
<input id="numgen" type="text"/>
<button name="generate" type="submit" onclick="gennum()">Generate!</button>
<script>
function gennum()
{
alert(Math.floor(Math.random() * num.value + 1));
}
var num = document.getElementById('numgen').value;
</script>
</form>
</body>
</html>
I am not very good with Javascript, but I know a bit. If anyone knows how to fix this, I would be happy.
num.value is a string. Use parseInt(num.value, 10) to turn it into a number, that way it can be added to a number appropriately.
Also, it looks like you're getting the value twice, and the first time is when the page loads (so it doesn't have a value yet:
var numElem = document.getElementById('numgen'); //remove value here
then in your function:
alert(Math.floor(Math.random() * parseInt(num.value + 1)));
and, you need to use type="button" on your button, or the page will reload.
Here's your code refactored with better practices.
Live demo here (click).
Markup:
<form name="gen">
<h1>Random Number Generator</h1>
<b>Number:</b> 1 to
<input id="numgen" type="text"/>
<button id="generate" type="button">Generate</button>
</form>
JavaScript:
/* get element references */
var genButton = document.getElementById('generate');
var numInput = document.getElementById('numgen');
//use javascript to add the click function
genButton.addEventListener('click', function() {
/* it's easier to read and debug if you break things up
* instead of putting it all on one line with tons of ((()))
*/
var rand = genRandom(1, parseInt(numInput.value, 10));
alert(rand);
});
function genRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

How to calculate two input form fields and put the value in another without submitting the form using jquery?

I know this is an extremely basic question but I'm stuck on this.
I have two input boxes and I want to calculate those inputs and show the result into another input (3rd one) immediately without the need of a submit button.
I means, once I start entering the values into the input and the result will shows live in the 3rd input which is the represent the result...
<input type="text" class="input value1">
<input type="text" class="input value2">
<input type="text" disabled="disabled" id="result">
<script>
$(document).ready(function(){
var val1 = $(".value1").val();
var val2 = $(".value2").val();
$(".input").keyup(function(){
$("#result").text(val1+val2);
});
});
</script>
Put val1 and val2 in keyup statement.
$(document).ready(function(){
$(".input").keyup(function(){
var val1 = +$(".value1").val();
var val2 = +$(".value2").val();
$("#result").val(val1+val2);
});
});
Look at fiddle: http://jsfiddle.net/g7zz6/
Under the assumption of SUM as you stated, the inputs will be numberic in nature.
$(".input").on("change", function(){
var ret = Number($(".value1").val()) + Number($(".value2").val());
$("#result").val(ret);
}
just set the text value, also you need to parse them as other wise they will be concatenated as strings.
$(document).ready(function () {
var val = parseInt($(".value1").val()) + parseInt($(".value2").val());
$("#result").text(val);
});
Live Demo
function addinput(){
var x= Number(document.getElementById("first").value);
var y= Number(document.getElementById("second").value);
var z= Number(x+y);
document.getElementById("l").value = Number(z);
}

Javascript html input element changes how to load into function?

I want user to load page, default value is 10 so it should calculate all variables for default value first, then I want user to enter his own value and click submit and the value gets updated.
Seems it needs onclick event that should call a function to recalculate the value.
I tried first without intparse and .value and no onclick event, then I figured out I need Intparse and .value to get integer. When setting default value on input id 1 it calculates three numbers correctly upon page load.
However when I put it in a function before it would calculate all three numbers correctly then page would reload for some reason and it goes back to default, This one doesn't work at all.
Can somebody explain what I did wrong?
<html>
<head>
</head>
<body>
<form id="frm1">
<input type="number" id="1" name="1" value="10"><br>
<input type="submit" onclick="myFunction()" id="s" value="Submit">
</form>
<p id="t"></p>
<script type="application/javascript">
Function myFunction() {
var N = parseInt(document.getElementById("1").value);
var m = N;
var cm = m * 100;
var mm = m * 1000;
document.getElementById("t").innerHTML = "" + m + " " + cm + " " + mm; }
</script>
</body>
</html>
Change the form to a div. This worked for me when I tried to run your code.

Categories