I got a input number into a var. I subtracted it to a number.
Thank you vicodin for helping me! I fixed it and it works! (I changed names for my program)
<!DOCTYPE html>
<html>
<body>
<p></p>
<span><input type="number" id="guess1"><p id="g1s"></p></span>
<input type="button" onclick="Calculate()" value="Calculate">
<script>
function Calculate() {
var GuessCon1 = document.getElementById("guess1").value;
var GuessCon1sub = GuessCon1 - 500;
document.getElementById("g1s").innerHTML = GuessCon1sub;
}
</script>
</body>
</html>
You assigned a string "numb1" to variable g. If you want to get the value of the input, you need to find that element (e.g. with document.geElementById method) and take a value from it.
Also, you want to trigger calculation, for example by a button click. I added a code in a snippet, you can run it and play around with it to get the idea.
var button = document.getElementById("substract")
button.onclick = function() {
var g = document.getElementById("numb1").value
var a = 578;
var x = g - a;
document.getElementById("demo").innerHTML = x;
}
<input type="number" id="numb1">
<input type="submit" id="substract">
<p id="demo"></p>
Related links:
Input Text value Property
onclick event
Related
I’m trying to get the computer to take an input from the HTML and add and multiply some number to it in Javascript. I’m from python and the variable system in Javascript makes no sense to me, so can someone please lmk what to do?
<div class = "text">How much energy do you use?</div>
<input id = "q1" type = "text" placeholder = "# of KilaWatts"></input>
<button type="button" onclick="getInputValue();">Submit</button>
<!-- Multiply InputValue by 3 and Add 2 —->
I tried to do something with parseInt, and parseString, but it didn’t work as it would just not run.
try this, first query input value then calculate your desire numbers then alert the user,
like this <!-- Multiply InputValue by 3 and Add 2 —->
function getInputValue() {
const inputVal = document.getElementById("q1").value; //query input value
const calculatedValue = ((inputVal *3) +2); // first multiply input value with 3
// then add 2
alert(calculatedValue); // show the calculated value through an alert
};
It's not that hard. try to play with the below code. Cheers!!
<html>
<body>
<label for="insertValue">Enter Your Value:</label>
<input type="text" id="insertValue">
<button onclick="Multiply()">Multiply</button> <!-- Calling to the JS function on button click -->
<p id="answer"></p>
<!-- Always link or write your js Scripts before closing the <body> tag -->
<script>
function Multiply() {
let value = document.getElementById("insertValue").value; //get the inserted Value from <input> text box
let answer = 0;
//Your Multiplication
answer = value * 2 * 3;
//Display answer in the <p> tag and it id ="answer"
document.getElementById("answer").innerText = "Your Answer is: "+ answer;
}
</script>
</body>
</html>
Easy (to understand) Solution:
<div class="text">How much energy do you use?</div>
<input id="q1" type="text" placeholder="# of KilaWatts"></input>
<button type="button" onclick="getInputValue();">Submit</button>
<br>
<output id="a1"></output>
<script>
var input = document.getElementById("q1");
var output = document.getElementById("a1");
function getInputValue() {
output.textContent = (input.value * 3) + 2;
}
</script>
I know that this question sounds silly but i am curious why i can avoid this problem in JavaScript. Now in the code below i have given :
var btn=document.getElementById("btn");
btn.onclick = function get() {
var x = document.getElementById("text").value; // --> HERE
document.getElementById("para").innerHTML = x;
};
get();
<input type="text" id="text" value="">
<input type="submit" value="submit" id="btn">
<p id="para"></p>
Now when i assign the variable x inside the function ,after the ("text") i get the .nodeValue instead of getting the .value. Is that a problem with my code editor or i have an error, because every time i put a name inside the input field it shows the result inside the paragraph it appears and fast also disappears
So I see 2 problems here:
You didn`t close your script tag.
You are calling get(); but the function does not exist in that scope but is only assigned in the onclick event.
This should do the trick:
var btn=document.getElementById("btn");
btn.onclick = function get() {
var x = document.getElementById("text").value;
document.getElementById("para").innerHTML = x;
};
<input type="text" id="text" value="HELLO">
<input type="submit" value="submit" id="btn">
<p id="para"></p>
I have preset the value to "HELLO", but you can change it as you want, and it will deliver the value requested when clicking on the button.
I think your only problem may have been how you were declaring the event listener, I declared it as an event listener on the button listening to the 'click' event.
I also edited 'x' to be 'userInput' so it is more clear what it is trying to achieve.
var btn = document.getElementById("btn");
btn.addEventListener('click', function () {
var userInput = document.getElementById("text").value;
document.getElementById("para").innerHTML = userInput;
});
var btn=document.getElementById("btn");
btn.onclick = function () {
var x = document.getElementById("text").value; // --> HERE
document.getElementById("para").innerHTML = x;
};
btn.onclick()
<input type="text" id="text" value="hello">
<input type="submit" value="submit" id="btn">
<p id="para"></p>
This is a working example of what you are trying to do. You can't declare a function in that context as it's anonymous. My example works perfectly, but you should do something more like
function get() {
//Do something
}
btn.onclick = get;
get();
I am not sure whether this will solve or not. However, I suggest you by giving an onclick event inside the input tag.
<input type="submit" value="submit" id="btn" onclick="get()">
<script>
function get() {
var x = document.getElementById("text").value;
document.getElementById("para").innerHTML = x;
}
</script>`
I am a beginner coder and I am having trouble with a simple program that basically says whatever you type into a text box under/above it. For example, if you type "Hello World" into the box, it will say "Hello World" in a paragraph under/above it. My current (faulty) code is this:
<p id="test"></p>
<input id="ipone type="text">
<script>
var x = document.getElementById("ipone").value;
x = test;
document.getElementById("test").innerHTML= document.getElementById("ipone").value;
</script>
I am trying to get it to work, and I am trying to have it as simple and small as possible. Please help.
The event you need is oninput, which triggers on any text typing, pasting, cutting, etc. by the user.
var input = document.getElementById("ipone");
var paragraph = document.getElementById("test");
input.addEventListener("input", function() {
var value = input.value;
paragraph.innerText = value;
});
/* just for demonstration */
#test{
min-height: 20px;
}
<p id="test"></p>
<input id="ipone" type="text">
I have wrapped your code into a function, and called that function whenever the input changes
more on the topic: Best way to track onchange as-you-type in input type="text"?
<p id="test"></p>
<input id="ipone" type="text" onchange="update()" onkeypress="update()" />
<script>
function update() {
var txt = document.getElementById("ipone").value;
document.getElementById("test").innerHTML= txt;
}
</script>
<input type="text" id="txtDemo" onchange="myFunction()"/>
<p>Entered Text:<span id="value"></span> </p>
<script>
function myFunction(){
var inputValue=document.getElementById("txtDemo").value;
var p=document.getElementById("value")
p.innerHTML=inputValue;
}
</script>
This code may help you
Hi I am NewBee in Javascript. This is my second week.
Below is the code that has a form with three input fields.
The relationship of the fields is:
the second field is twice the value of the first field
the third field is the square of the first field
I have managed to do the above but i am not able to do the below :
If a user enters a value in the second or third field, the script should calculate the appropriate value in the other fields. Currently the code works well ONLY if I enter the value in the first field.
I hope I explained well in other words : how do I enter say 144 in the last textbox and the other 2 textboxes show 12 and 24 respectively. Or If I enter 24 first and first and the third text boxes show 12 and 144.
Thanks
Vipul
<html>
<head>
<script>
window.onload = init;
function init() {
var button = document.getElementById("usrButton");
button.onclick = save;
onkeyup = doMath;
function doMath(){
var base = document.getElementById("base").value;
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value = (base*2);
var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
}
}
</script>
</head>
<body>
<form>
<input type="text" name="base" id="base" onkeyup= "doMath()">
<br><br>
<input type="text" name="baseNumber_timesTwo" id="baseNumber_timesTwo" onkeyup= doMath()>
<br><br>
<input type="text" name="baseNumber_square" id="baseNumber_square" onkeyup= doMath()> <br><br>
</form>
</body>
</html>
take a look at the code below:
<html>
<head>
<script>
window.onload = init;
var init = function(){
var button = document.getElementById("usrButton");
button.onclick = save;
onkeyup = doMath;
}
var doMathbase = function(){
console.log('here');
var base = document.getElementById("base").value;
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value = (base*2);
var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
}
var doMathBase2Time = function(){
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value;
var base = document.getElementById("base").value = (baseNumber_timesTwo/2);
var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
}
</script>
</head>
<body>
<form>
<input type="text" name="base" id="base" onkeyup= "doMathbase()">
<br><br>
<input type="text" name="baseNumber_timesTwo" id="baseNumber_timesTwo" onkeyup= "doMathBase2Time()">
<br><br>
<input type="text" name="baseNumber_square" id="baseNumber_square" onkeyup= "doMathBaseSquare()">
<br><br>
</form>
</body>
You need to bind another function to the second and third field. I did it to the second. Now if you entered a number in the second field it return the 'base' number and the square of the base.
Try do it for the third :)
This should fit your needs:
Fiddle
//declaring those earlier saves you to get those by ID every
//time you call "doMath()" or something else
var base = document.getElementById("base");
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo");
var baseNumber_square = document.getElementById("baseNumber_square");
function clearUp() {
base.value = "";
baseNumber_timesTwo.value = "";
baseNumber_square.value = "";
}
function doMath() {
//check which of the fields was filled
if(baseNumber_timesTwo.value){
base.value = baseNumber_timesTwo.value / 2;
}
if(baseNumber_square.value){
base.value = Math.sqrt(baseNumber_square.value);
}
//fill other fields according to that
baseNumber_timesTwo.value = (base.value*2);
baseNumber_square.value = (base.value*base.value) ;
}
As you see: There is no need to write more than one arithmetic function if you make sure that only one value is given at the time of evaluation (this is achieved by the cleanUp()
method)
However there are still some flaws in this solution! Since you are a js beginner I would suggest you to read the code and think about possible solutions for those problems as a little exercise :-)
- You cannot enter a 2 (or more) digit number in any field, why not? What do you have to change in order to allow such numbers as input?
- Why is it better (in this case!) to set the values to " " instead of '0' in the cleanUp function? Why does the code break when you try using '0' instead of "" ?
- Why does doMath() only check for values in the last two field (baseNumber_timesTwo and baseNumber_square) while ignoring the 'base' field?
Greetings, Tim
while loop in javascript
function calc(){
var one = document.getElementById("fv").value;
var two = document.getElementById("sv").value;
var one1 = parseInt(one);
var two1 = parseInt(two);
var total = 0;
if(one1<=two1){
while (one1 <= two1){
total = total+one1;
one1++;
total=total;
}
document.getElementById("tv").value = total;
}}
calc() //call function
</script>
<form>
There are some confusion using while loop in java script. can i use while loop for those type of calculation?
<p>"Calculation of sum between two numbers"</p>
<h5>First Number</h5><input type ="text" value="1" name="firstv" id="fv"><br>
<h5>Second Number</h5><input type="text" value="100" name="sectv" id="sv"><br>
<h5>Value</h5><input type="number" value= "" name="tv" id="tv"><br>
<button onclick="calc()" value="click">Calculate</button><br>
</form>
</body>
</html>
You need to stop the button from actually submitting the form. If you make sure that your Javascript function appears before your html and your button looks like this:
<button onclick="calc(); return false;" value="click">Calculate</button>
Then it should work properly
If you need to call the first calc() before the button is clicked, you need to do it when the document is ready:
document.addEventListener("DOMContentLoaded", function(event) {
calc();
});
Example