在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()函数中发现了一些东西。首先，我将所有Javascript代码移动到summarizeGjester()函数中的 bursdagskalkulator.js 文件中。我还使用parseInt()函数将var antallGjester转换为整数，因为它之前被视为字符串。

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

第一个布尔比较也改为 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>

我希望这会有所帮助： - ）

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

使用静态ClientIDMode进行页面呈现后的稳定ID和访问 PlaceHolders可以改变childe的id

Answer 3

我认为这对你有用

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>

<强>编辑：

此代码背后的原因不是在jsfiddle中运行就在这里。

在创建changeTheVariable()全局变量后，此代码也将在jsfiddle中运行。这里https://jsfiddle.net/1b9cfmje/

使用以下javascript代码：

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