有人可以帮我实现按钮功能吗?

时间:2019-03-26 16:14:54

标签: javascript css html5

当我按下左侧的减号按钮时,我希望等号左侧的数字(在本例中为“ 7”)为每次单击按钮递减一个数字,直到达到零为止。 / p>

我有一起工作的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>

2 个答案:

答案 0 :(得分:2)

您需要将i的新值重新设置为元素“ leftnum”。另外,要获取元素“ leftnum”的值,您需要访问innerHTML属性。

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

答案 1 :(得分:1)

document.getElementById()仅会为您提供DOM节点,然后您需要从中获取值(innerHTML),执行所需的任何操作,然后设置结果。我可以建议您看看innerHTML-https://www.w3schools.com/jsref/prop_html_innerhtml.asp上如何获得该值以及如何对其进行设置