Блог

Главная - Вопросы по программированию - Может ли кто-нибудь помочь мне с моими функциями кнопок?

Может ли кто-нибудь помочь мне с моими функциями кнопок?

#javascript #css #html

#javascript #css #HTML

Вопрос:

Когда я нажимаю кнопку минус слева, я хотел бы, чтобы число в левой части знака равенства (в данном случае «7») отсчитывало одно число при каждом нажатии кнопки, пока оно не достигнет нуля.

У меня есть файлы html, css и js, работающие вместе. Я поместил их в один файл и вырезал весь ненужный код с целью публикации здесь. Моя проблема (я думаю) в функции leftMinusButton() и в том, как она взаимодействует с html.

 function leftMinusButton() {
  var i = document.getElementById("leftnum");

  if (i > 0) {
    i--;
  }
}  
 body {
  font-family: arial, "times new roman";
  background: lightblue;
  color: black;
  text-align: center;
}

.leftminus {
  position: absolute;
  top: 60px;
  left: 30px;
  width: 50px;
  height: 50px;
  font-size: 40px;
}

.variable {
  position: absolute;
  top: 120px;
  left: 115px;
  font-size: 40px;
}

.plus {
  position: absolute;
  top: 120px;
  left: 175px;
  font-size: 40px;
}

.leftnum {
  position: absolute;
  top: 120px;
  left: 240px;
  font-size: 40px;
}

.equals {
  position: absolute;
  top: 120px;
  left: 300px;
  font-size: 40px;
}

.rightnum {
  position: absolute;
  top: 120px;
  left: 350px;
  font-size: 40px;
}  
 <div id="workspace">
  <div class="variable" id="variable">x</div>
  <div class="plus" id="plus"> </div>
  <div class="leftnum" id="leftnum">7</div>
  <div class="equals" id="equals">=</div>
  <div class="rightnum" id="rightnum">19</div>
</div>

<div id="plusminus">
  <button type="button" class="leftminus" id="leftminus" onclick="leftMinusButton()">-</button>
</div>

Ответ №1:

Вам нужно было бы вернуть новое значение i обратно элементу «leftnum». Кроме того, для получения значения элемента «leftnum» вам необходимо получить доступ к свойству innerHTML.

 var i = document.getElementById("leftnum");
var value = parseInt(i.innerHTML);
if (value  > 0) {
    value--;
}
i.innerHTML = value;

Ответ №2:

document.getElementById() это приведет только к получению узла DOM, затем вам нужно получить из него значение (innerHTML), сделать все, что вам нужно, а затем установить результат. Могу ли я предложить вам взглянуть на innerHTML — https://www.w3schools.com/jsref/prop_html_innerhtml.asp о том, как получить значение и как его можно установить

Комментарии:

1. Спасибо за рекомендацию, я посмотрю на это.