JavaScript計算器 - 如何獲得輸入字段的數字？

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){ 

} 

我知道我需要運行在一個函數的循環，但對我的生活，我畫坯，以什麼進入到從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

有在你的代碼的幾個問題：

1. 事件偵聽器接受名爲entry的參數，該參數將覆蓋外部範圍中的entry變量。您傳遞給addEventListener的事件偵聽器的第一個參數包含有關單擊事件（通常不需要）的信息。因此請從事件偵聽器中刪除entry參數。

2. 事件偵聽器中的this的值是對綁定事件偵聽器的元素的引用。它不會有名爲html的房產。

3. 您聲明瞭一個名爲number的變量，但使用了一個名爲numbers的變量。

4. numbers[i].addEventListener("click", function(entry)){導致語法錯誤。刪除參數列表和函數體之間的第二個)。

5. 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

正如他在答覆中提到的喬納斯，也有在當前的代碼一堆問題 - 包括一些語法問題。所以我決定完全替換你的事件處理程序，並使用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我剛纔已經簡化了。此外，允許的輸入元素進行快速訪問，我給它一個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.增加ID爲inputfield

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

2.Do吧！

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; 
     } 
    }); 
}