主页 / 问题 / 1120857
Accepted
Никита Попов
Asked:2020-05-06 02:05:01 +0000 UTC2020-05-06 02:05:01 +0000 UTC

如何写一个计算器？

  • 772

我正在尝试编写一个基于浏览器的计算器，但它还不能工作。请告诉我，为什么按类查找元素，取其值并将其显示在文本输入行上的想法行不通？

PS请不要立即向我的垃圾代码扔西红柿））

function search() {
  document.querySelector();
}

function click() {
  let x = search('.btn').value;
  search('.input').innerHTML(x);
}
<div class="calcBody">
  <div class="expression">
    <input type="text" class="input">
  </div>
  <div class="operators">
    <input type="button" class="btn" id="btn-1" value="7" onclick="click(this)"></input>
    <input type="button" class="btn" id="btn-2" value="8" onclick="click(this)"></input>
    <input type="button" class="btn" id="btn-3" value="9" onclick="click(this)"></input>
    <input type="button" class="btn" id="btn-4" value="+" onclick="click(this)"></input>
    <input type="button" class="btn" id="btn-5" value="4" onclick="click(this)"></input>
    <input type="button" class="btn" id="btn-6" value="5" onclick="click(this)"></input>
    <input type="button" class="btn" id="btn-7" value="6" onclick="click(this)"></input>
    <input type="button" class="btn" id="btn-8" value="-" onclick="click(this)"></input>
    <input type="button" class="btn" id="btn-9" value="1" onclick="click(this)"></input>
    <input type="button" class="btn" id="btn-10" value="2" onclick="click(this)"></input>
    <input type="button" class="btn" id="btn-11" value="3" onclick="click(this)"></input>
    <input type="button" class="btn" id="btn-12" value="*" onclick="click(this)"></input>
    <input type="button" class="btn" id="btn-13" value="0" onclick="click(this)"></input>
    <div class="btn-14"></div>
    <div class="btn-15"></div>
    <input type="button" class="btn" id="btn-16" value="/"></input>
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    function btnClick(btn) {
  var expression = document.querySelector('.input');
  expression.value += btn.value;
}
function btnEval() {
  var expression = document.querySelector('.input');
  expression.value = eval(expression.value);
}
    <div class="calcBody">
  <div class="expression">
    <input type="text" class="input"/>
  </div>
  <div class="operators">
    <input type="button" class="btn" id="btn-1" value="7" onclick="btnClick(this)"/>
    <input type="button" class="btn" id="btn-2" value="8" onclick="btnClick(this)"/>
    <input type="button" class="btn" id="btn-3" value="9" onclick="btnClick(this)"/>
    <input type="button" class="btn" id="btn-4" value="+" onclick="btnClick(this)"/>
    <br/>
    <input type="button" class="btn" id="btn-5" value="4" onclick="btnClick(this)"/>
    <input type="button" class="btn" id="btn-6" value="5" onclick="btnClick(this)"/>
    <input type="button" class="btn" id="btn-7" value="6" onclick="btnClick(this)"/>
    <input type="button" class="btn" id="btn-8" value="-" onclick="btnClick(this)"/>
    <br/>
    <input type="button" class="btn" id="btn-9" value="1" onclick="btnClick(this)"/>
    <input type="button" class="btn" id="btn-10" value="2" onclick="btnClick(this)"/>
    <input type="button" class="btn" id="btn-11" value="3" onclick="btnClick(this)"/>
    <input type="button" class="btn" id="btn-12" value="*" onclick="btnClick(this)"/>
    <br/>
    <input type="button" class="btn" id="btn-13" value="0" onclick="btnClick(this)"/>
    <input type="button" class="btn" id="btn-16" value="/" onclick="btnClick(this)"/>
    <br/>
    <input type="button" class="btn" id="btn-13" value="=" onclick="btnEval()"/>
  </div>
</div>

    • 1

相关问题