在onclick操作之后更改Javascript变量值

Question

Pretty new to this Javascript thing.

I want to change a Javascript variable when a user inserts a number into an input field in my HTML document and clicks a button.

I'm assuming you'd use a function, but how do you gather the data and change the variable?

The stuff I tried to make looks a little something like this.

HTML

<input type="number" id="inputField">
<button onclick="changeTheVariable()" type="button" id="pushMe"></button>

Javascript

var a = 0;
function changeTheVariable() {
   a = document.getElementById("inputField").value;
}

but it's not working!

Edit 1:

Wow. I didn't think I'd get this kind of attention. I also found it a bit strange it didn't work at first.

The question I'm asking is partly for a calculator here: https://titomagic.com/debug

It's simple, you type in a number, click the button and it calculates (based on other variables) to a result on the bottom.

Here's a link to the Javascript file, if you wanna have a look: https://titomagic.com/js/bursdagskalkulator.js

To those of you asking; yes, I've been testing with a console.log and the variable is not changing. It's not affecting the other variables (as it should?).

Also I've never heard of JSfiddle.

Answer 1

I discovered few things in the summarizeGjester() function. First of all I moved all the Javascript code in the bursdagskalkulator.js file inside the summarizeGjester() function. Also I converted var antallGjester to integer using parseInt() function, because it was treated as string before.

 var antallGjester = document.getElementById("gjesterAntallInput").value;
 antallGjester = parseInt(antallGjester);  //integer conversion

Also the first Boolean comparison was changed to if ((antallGjester < 10) && (antallGjester > 0)) , so that the second one would work if there's 0 value: else if (antallGjester === 0) .

  function summarizeGjester() { var antallGjester = document.getElementById("gjesterAntallInput").value; antallGjester = parseInt(antallGjester); var fastPris = 1500; var fastPrisDifferanse = 10; var gjestePris = 120; var gjesteDifferanse = antallGjester - fastPrisDifferanse; var gjesteSum = gjestePris * gjesteDifferanse; var gjesterTotalt = 0; if ((antallGjester < 10) && (antallGjester > 0)) { console.log("antallGjester < 10"); gjesterTotalt = 1500; } else if (antallGjester === 0) { console.log("antallGjester === 0"); gjesterTotalt = 0; } else { console.log("else"); gjesterTotalt = fastPris + gjesteSum; } document.querySelector('#results').innerHTML = gjesterTotalt; } 

 <form> <div class="form-group"> <label for="gjesterAntall">Antall barn:</label> <input type="number" class="form-control" id="gjesterAntallInput"> </div> <button class="btn btn-lg btn-warning" onclick="summarizeGjester()" type="button" id="sumGjester">Legg sammen</button> </form> <h1 class="text-center" style="font-size:80px;"><strong><span id="results">0</span>,-</h1> 

I hope this helps :-)

Answer 2

HTML

<input type="number" id="inputField" ClientIDMode="static">
<button onclick="changeTheVariable()" type="button" id="pushMe"></button>

Javascript

var a = 0;
function changeTheVariable() {
   a = document.getElementById('inputField').value;
   alert(a);
}

Use Static ClientIDMode for stable id and access after page rendering PlaceHolders canh change childe's id

Answer 3

I suppose this will work for you

 var a = 0; function changeTheVariable() { a = document.getElementById("inputField").value || a; document.getElementById("result").innerText = parseFloat(a); } 

 <input type="number" id="inputField"> <button onclick="changeTheVariable()" type="button" id="pushMe">Click me</button> <div>Result: <span id="result"></span></div> 

Edited:

The reason behind this code is not running in jsfiddle is here.

After making the changeTheVariable() global variable this code will work in jsfiddle also. Here https://jsfiddle.net/1b9cfmje/

Use the following javascript code:

window.onload = function(){ var a = 0; window.changeTheVariable = function() {  a = document.getElementById("inputField").value || a; document.getElementById("result").innerText = parseFloat(a); }}