Довольно новый для этой вещи Javascript.

Я хочу изменить переменную Javascript, когда пользователь вставляет число в поле ввода в моем HTML-документе и нажимает кнопку.

Я предполагаю, что вы использовали бы функцию, но как вы собираете данные и меняете переменную?

То, что я пытался сделать, выглядит примерно так.

< сильный > 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:

Wow . Я не думал, что получу такое внимание. Мне также показалось немного странным, что сначала это не сработало.

Вопрос, который я задаю, частично относится к калькулятору здесь: https://titomagic.com / отладки

Все просто, вы вводите число, нажимаете кнопку, и оно вычисляет (на основе других переменных) результат в нижней части.

Вот ссылка на файл Javascript, если вы хотите посмотреть: https : //titomagic.com/js/bursdagskalkulator.js

Тем из вас, кто спрашивает; да, я тестировал с console.log и переменная не меняется. Это не влияет на другие переменные (как это должно быть?).

Кроме того, я никогда не слышал о JSfiddle.

1
Øyvind Remme 11 Дек 2016 в 09:19

3 ответа

Лучший ответ

Я обнаружил несколько вещей в функции summarizeGjester(). Прежде всего я переместил весь код Javascript в файл bursdagskalkulator.js в функцию summarizeGjester(). Также я преобразовал var antallGjester в целое число с помощью функции parseInt (), потому что раньше обрабатывался как строка

 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>

Надеюсь, это поможет :-)

0
jyrkim 11 Дек 2016 в 07:54

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

Используйте Static ClientIDMode для стабильного идентификатора и доступа после рендеринга страницы. PlaceHolders canh изменить идентификатор ребенка

0
Omid Farvid 11 Дек 2016 в 08:06

Я полагаю, это будет работать для вас

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 :

Причина, по которой этот код не работает в 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); }}
-1
rapidRoll 11 Дек 2016 в 08:08