首頁猿問如何使用單個事件偵聽器而不是每個按...

如何使用單個事件偵聽器而不是每個按鈕中的 onclick 事件來做一個迷你計算器？

JavaScript

猛跑小豬 2022-07-15 09:56:37

挑戰(zhàn)是用一個輸入、4 個按鈕和一個輸出做一個簡單的迷你計算器。輸入是添加一個將立即出現(xiàn)在輸出中的數(shù)字，接下來我將選擇四個按鈕（+、-、*、/）中的一個來進行數(shù)學運算，然后在輸入上再次寫入另一個數(shù)字。在輸出中將出現(xiàn)該操作的結果，進一步將通過再次單擊按鈕并添加另一個數(shù)字來繼續(xù)進行數(shù)學運算，并始終實現(xiàn)結果。我之前在每個按鈕中使用 onclick 事件并使用提示寫入數(shù)字來完成此操作?，F(xiàn)在我想使用輸入來寫入數(shù)字并使用一個事件偵聽器來處理所有按鈕。任何人都可以幫助我解決問題并向我解釋每一步嗎？到目前為止，這是我的代碼：let input =document.querySelector('#input');let output =document.querySelector('#output');let divButtons = document.querySelector('#buttons');let messageOutput = (message) =>{ output.innerHTML = message;}messageOutput(input.value); // this doesn't work. What I miss to do show the input in the output?divButtons.addEventListener('click', () =>{ //do something})<section class="container"> <h1 class="heading">Do some maths</h1> <div class="calculator"> <input class="inputNumbers" id="input" type="number" placeholder="choose a number here"> <div class="buttons" id="buttons"> <button id="plus" class="btn btn-plus">+</button> <button id="minus" class="btn btn-minus">-</button> <button id="multiply" class="btn btn-multiply">*</button> <button id="divide" class="btn btn-divide">/</button> </div> <div id="output" class="visor"></div> </div></section>我是新手，所以我需要幫助來解決這個挑戰(zhàn)并了解我應該做什么。謝謝

查看完整描述

3 回答

胡子哥哥

TA貢獻1825條經(jīng)驗獲得超6個贊

稍微修改了 JS 代碼，使用您已經(jīng)編寫的偵聽器，如果您需要更多解釋，請告訴我。希望能幫助到你。

let input =document.querySelector('#input');

let output =document.querySelector('#output');

let divButtons = document.querySelector('#buttons');

let a = null;

let b = null;

let op = null;

let messageOutput = (message) =>{

output.innerHTML = message;

}

messageOutput(input.value); // this doesn't work. What I miss to do show the input in the output?

divButtons.addEventListener('click', (event) =>{

//checking if button is pressed

if(event.target.type = 'submit') {

//if a is not set before, meaning first time input

if(a == null) {

a = Number(input.value);

} else {

// second number

b = Number(input.value);

if(op == 'plus') {

a += b;

} else if(op == 'minus') {

a -= b;

}else if(op == 'multiply') {

a *= b;

} else {

a /= b;

}

//saving the operator that was pressed

op = event.target.id;

//showing output

output.innerHTML = a + " " + op;

//resetting input on each button pressed.

input.value = '';

}

});

<h1 class="heading">Do some maths</h1>

</div>

</div>

</section>

反對回復 2022-07-15

一只甜甜圈

TA貢獻1836條經(jīng)驗獲得超5個贊

希望這可以幫助。稍微修改了您的代碼段并添加了一些變量。

let input = document.querySelector("#input");

let output = document.querySelector("#output");

let divButtons = document.querySelector("#buttons");

let result = null;

let selectedOperation = null;

let messageOutput = message => {

output.innerHTML = message;

};

divButtons.addEventListener("click", event => {

//do something

let id = event.target.id;

let value = parseInt(input.value);

switch (selectedOperation) {

case "plus":

result += value;

break;

case "minus":

result -= value;

break;

case "multiply":

result *= value;

break;

case "divide":

result /= value;

break;

default:

result = value;

break;

}

selectedOperation = id;

input.value = "";

messageOutput(`${result} ${selectedOperation}`);

});

反對回復 2022-07-15

Cats萌萌

TA貢獻1805條經(jīng)驗獲得超9個贊

將您的輸入數(shù)字保存到變量中，然后將用戶單擊的數(shù)學函數(shù)保存到變量中，然后使用用戶輸入的當前值作為因子將其應用于保存的輸入數(shù)字。

像這樣的東西：

let input = document.querySelector('#input');

let output = document.querySelector('#output');

let inputnumber = 0;

let subtotal = 0;

let total = 0;

let calculate = 0;

let x;

let y;

input.oninput = (e) => {

if(subtotal == 0) {

output.value = e.target.value;

}

x = Number(e.target.value);

y = Number(subtotal);

switch (calculate) {

case "btn-divide":

calc = y / x;

break;

case "btn-multiply":

calc = y * x;

break;

case "btn-plus":

calc = x + y;

break;

case "btn-minus":

calc = y - x;

break;

case 0:

calc = x;

break;

}

output.value = calc;

}

const divs = document.querySelectorAll('#buttons');

divs.forEach(el => el.addEventListener('click', event => {

calculate = event.target.classList[1];

input.value = null;

subtotal = calc;

}));

<h1 class="heading">Do some maths</h1>

</div>

</div>

</section>

反對回復 2022-07-15

3 回答
0 關注
108 瀏覽

關注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

如何使用單個事件偵聽器而不是每個按鈕中的 onclick 事件來做一個迷你計算器？

如何使用單個事件偵聽器而不是每個按鈕中的 onclick 事件來做一個迷你計算器？

3 回答

添加回答

如何使用單個事件偵聽器而不是每個按鈕中的 onclick 事件來做一個迷你計算器？

如何使用單個事件偵聽器而不是每個按鈕中的 onclick 事件來做一個迷你計算器？