Как я могу активировать условие "если" на событии onclick - PullRequest
Новая
       7

Как я могу активировать условие "если" на событии onclick

2 голосов
/ 19 марта 2020

Кажется, я не могу понять, почему моя часть «если» не работает с событием onclick. Я пытаюсь заставить функцию выполняться по щелчку в HTML, она выполняется, но в результате я всегда получаю «неопределенное» ...

Мой HTML равен: 

<button type="button" id="n1" class="btn btn-secondary btn-decor" onclick="pressNumber()">1</button>
                <button type="button" id="n2" class="btn btn-secondary btn-decor" onclick="pressNumber()">2</button>

и Javascript


var displayedValue = document.getElementById("calc-disp").textContent;

var fullNumber;

function pressNumber () {
    if (document.getElementById("n1")) {
        var fullNumber = displayedValue + numbers[1];
    }
    else if (document.getElementById("n2")) {
        var fullNumber = displayedValue + numbers[2];
    }
    displayValueNow();
}

// display result

function displayValueNow () {
    document.getElementById("calc-disp").innerHTML = fullNumber;
}```

thanks for any advice

Ответы [ 2 ]

3 голосов
/ 19 марта 2020

Вместо использования оператора if просто введите номер кнопки в качестве аргумента функции и используйте его в своих вычислениях. 

const numbers = [0, 1, 2];

// Cache only the element
const displayedValue = document.getElementById('calc-disp');

function displayValueNow(fullNumber) {
  displayedValue.textContent = fullNumber;
}

function pressNumber(n) {

  // Make sure you coerce your displayed value (a string) to
  // an integer before trying to add it to the number in the array
  var fullNumber = Number(displayedValue.textContent) + numbers[n];

  // Pass in `fullNumber` as an argument to `displayValueNow`
  // so you're not using a global variable
  displayValueNow(fullNumber);
}
<button type="button" onclick="pressNumber(1)">1</button>
<button type="button" onclick="pressNumber(2)">2</button>
<div id="calc-disp"></div>
1 голос
/ 19 марта 2020

Вы были близки, условие if не сработало, потому что ваш оператор проверил, существует ли элемент, а не был ли он нажат. Для этого передайте параметр вашей функции pressNumber из вашего html (здесь я передаю кнопку, вы можете передать идентификатор напрямую или значение числа). 

// declare your numbers array
var numbers = [1, 2]

// +so that it's a number not a string (try removing it)
var fullNumber = +document.getElementById("calc-disp").textContent; 

// removed, we should only operate on the fullNumber variable
// var displayedValue = document.getElementById("calc-disp").textContent;


function pressNumber(button) {
// in an if, document.getElementById("n1") just checks if the element exists - since it always exists, the else branch will never be executed
  if (button.id === "n1") {
  // remove the var so it changes the outer fullNumber
    fullNumber = fullNumber + numbers[0];
    
  } else if (button.id === "n2") {
    fullNumber = fullNumber + numbers[1];
  }
  displayValueNow();
}

// display result

function displayValueNow() {
  document.getElementById("calc-disp").innerHTML = fullNumber;
}
<button type="button" id="n1" class="btn btn-secondary btn-decor" onclick="pressNumber(this)">1</button>
<button type="button" id="n2" class="btn btn-secondary btn-decor" onclick="pressNumber(this)">2</button>

<div id="calc-disp">0</div>
...