javascript - onclick 操作后更改 Javascript 变量值

Question

对于 Javascript 来说还是很新的。

当用户在 HTML 文档的输入字段中插入数字并单击按钮时，我想更改 Javascript 变量。

我假设您会使用函数，但是如何收集数据并更改变量？

我尝试做的东西看起来有点像这样。

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;
}

但它不起作用!

编辑 1:

哇。我没想到我会受到这样的关注。我也觉得有点奇怪，一开始不起作用。

我问的问题部分是针对计算器的:https://titomagic.com/debug

很简单，您输入一个数字，单击按钮，它就会(基于其他变量)计算出底部的结果。

如果您想查看的话，这里有一个 Javascript 文件的链接:https://titomagic.com/js/bursdagskalkulator.js

对于那些询问的人；是的，我一直在使用 console.log 进行测试，并且变量没有改变。它不会影响其他变量(它应该吗？)。

而且我从来没有听说过 JSfiddle。

Answer 1

我在 summarizeGjester() 中发现了一些东西功能。首先，我将 bursdagskalkulator.js 文件中的所有 Javascript 代码移至 summarizeGjester() 内。功能。我还转换了var antallGjester使用 parseInt() 转换为整数函数，因为之前它被视为字符串。

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

第一个 bool 比较也更改为 if ((antallGjester < 10) && (antallGjester > 0)) ，这样如果值为 0，第二个就可以工作: 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>

我希望这有帮助:-)