Question

所以我已经为我的所有数字分配了一类数字，并为我的所有运算符分配了一类具有特定于其操作的ID的运算符。每个项目都在div标签内。

此处的完整数据：jsfiddle

    <div class="number clear" id="clear"><h1>C</h1></div>
    <div class="number" id="entry"><input type="number"></div>
    <div class="number seven"><h1>7</h1></div>
    <div class="number eight"><h1>8</h1></div>
    <div class="number nine"><h1>9</h1></div>
    <div class="operate divide" id="divide"><h1>/</h1></div>

所以上面只是对HTML的一瞥。我的CSS工作得非常好，但我正在努力使用JavaScript。我已经放入一个for循环来从HTML中的所有数字中拉出来为onclick做一个addEventListener。我对for循环感到自信，但我肯定是错的。现在我有以下内容：

let number = document.getElementsByClassName("number");
let operate = document.getElementsByClassName("operate");
let entry = document.getElementById("entry");
let clear = document.getElementById("clear");
let sub=document.getElementById("sub");
let multiply = document.getElementById("mul");
let divide = document.getElementById("divide");
let add = document.getElementById("plus");

for (let i=0; i<numbers.length; i++) {
  numbers[i].addEventListener("click", function(entry)){
    let inputValue = entry[0].innerHTML;
    let buttonValue = this.html;
    if (buttonValue === "C") {
     entry[0].innerHTML = "";
    } else {
      entry[0].innerHTML += buttonValue;
    }
  }
}

function (entry){

}

我知道我需要在for循环中运行一个函数但是对于我的生命，我正在绘制关于输入什么以将值从div推入计算的输入字段的空白。现在，如果我点击任何按钮没有任何反应，显然没有任何功能。任何有关如何调整此内容以获取内容的见解都将受到赞赏。

Answer 1

let numbers = document.getElementsByClassName("number");
let entry = document.getElementById("entry");

for (let i=0; i<numbers.length; i++) {
  numbers[i].addEventListener("click", function(){
    let buttonValue = this.textContent;
    if (buttonValue === "C") {
     entry.innerHTML = "0000";
    } else {
      entry.innerHTML = (entry.innerHTML+buttonValue).substr(-4);
    }
  });
}

.number {
display:inline-table;
}

<h1><div id="entry">0000</div></h1>
<div class="number"><h1>1</h1></div>
<div class="number"><h1>2</h1></div>
<div class="number"><h1>3</h1></div><br>

<div class="number"><h1>4</h1></div>
<div class="number"><h1>5</h1></div>
<div class="number"><h1>6</h1></div><br>

<div class="number"><h1>7</h1></div>
<div class="number"><h1>8</h1></div>
<div class="number"><h1>9</h1></div><br>

 <div class="number "><h1>C</h1></div>

您只是混淆了一些变量名称并使用了不存在的属性......

Answer 2

您的代码中存在以下几个问题：

您的事件侦听器接受名为entry的参数，该参数将覆盖外部作用域中的entry变量。传递给addEventListener的事件侦听器的第一个参数包含有关click事件的信息（通常不需要）。因此，请从事件侦听器中删除entry参数。
事件侦听器中this的值是对绑定事件侦听器的元素的引用。它没有名为html的属性。
您声明了一个名为number的变量，但使用了一个名为numbers的变量。
numbers[i].addEventListener("click", function(entry)){会导致语法错误。删除参数列表和函数体之间的第二个)。
function (entry){}会导致语法错误，因为函数语句需要名称。只需删除它，这是多余的。

也就是说，从以下代码片段中获得灵感：

const input = document.querySelector('input');
document.querySelectorAll('.number').forEach(function (button, index) {
  button.addEventListener('click', function () {
    input.value += index + 1;
  });
});

<input type="number">
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="number">4</button>

Answer 3

正如Jonas在他的回答中所提到的，当前代码中存在许多问题 - 包括一些语法问题。所以我决定完全替换你的事件处理程序，并使用jQuery编写它 - 因为它在这种情况下真的很方便。

事件处理程序如下所示：

$(".number").on("click", function(event){
    var num = $(this).text();
  console.log(num);

  if(num != 'C') {
    var currentNumber = $("#entryNum").val();
    $("#entryNum").val(currentNumber.toString() + num.toString());
  } else {
    $("#entryNum").val('');
  }
});

事件处理程序的逻辑与原始逻辑非常相似，但我刚刚使用jQuery对其进行了简化。另外，为了更快地访问input元素，我给它一个ID entryNum：

<div class="number" id="entry"><input type="number" id="entryNum"></div>

这是更新的小提琴：https://jsfiddle.net/Nisarg0/L9mL4v3a/6/

Answer 4

虽然选择适当的元素和语法错误存在问题，但不确定是否存在确切的逻辑或预期结果

for (let i = 0; i < numbers.length; i++) {
  numbers[i].addEventListener("click", function(event) {
      // select the `<input>` child element of `entry` here, not `entry[0]`
      // and use `.value` property
      let inputValue = entry.querySelector("input").value;
      // you want `.textContent` here, not `.innerHTML`
      let buttonValue = this.textContent;
      if (buttonValue === "C") {
        entry.innerHTML = "";
      } else {
        entry.innerHTML += buttonValue;
      }   
  }) // include closing `)` at `.addEventListener()` call
}

Answer 5

我只是实现按下和清除功能。

学习并做到这一点！

1.为inputfield添加id

<div class="number" id="entry"><input id="entryText" type="number"></div>

2.做吧！

let numbers = document.getElementsByClassName("number");
let entryText = document.getElementById("entryText");

for (let i=0; i<numbers.length; i++) {
    numbers[i].addEventListener("click", function(event){
    let buttonValue = event.toElement.innerText;
        if (buttonValue === "C") {
            entryText.value = "";
        } else {
            entryText.value += buttonValue;
        }
     });
}

JavaScript计算器 - 如何将数字输入到输入字段？

5 个答案: