如何减少 Javascript 重复
[英]How to reduce Javascript repetition
问题描述
我一直在研究 CS50 IDE 中的在线计算器。 到目前为止，一切都很好，尽管我对重复的次数感到困扰。 我的代码如下：
document.querySelector("#one").onclick = function() { let expression = document.querySelector("#expression"); if (Number(expression.innerHTML) == 0) { expression.innerHTML = 1; } else { expression.innerHTML += 1; } } document.querySelector("#two").onclick = function() { let expression = document.querySelector("#expression"); if (Number(expression.innerHTML) == 0) { expression.innerHTML = 2; } else { expression.innerHTML += 2; } } document.querySelector("#three").onclick = function() { let expression = document.querySelector("#expression"); if (Number(expression.innerHTML) == 0) { expression.innerHTML = 3; } else { expression.innerHTML += 3; } } document.querySelector("#four").onclick = function() { let expression = document.querySelector("#expression"); if (Number(expression.innerHTML) == 0) { expression.innerHTML = 4; } else { expression.innerHTML += 4; } } document.querySelector("#five").onclick = function() { let expression = document.querySelector("#expression"); if (Number(expression.innerHTML) == 0) { expression.innerHTML = 5; } else { expression.innerHTML += 5; } } document.querySelector("#six").onclick = function() { let expression = document.querySelector("#expression"); if (Number(expression.innerHTML) == 0) { expression.innerHTML = 6; } else { expression.innerHTML += 6; } } document.querySelector("#seven").onclick = function() { let expression = document.querySelector("#expression"); if (Number(expression.innerHTML) == 0) { expression.innerHTML = 7; } else { expression.innerHTML += 7; } } document.querySelector("#eight").onclick = function() { let expression = document.querySelector("#expression"); if (Number(expression.innerHTML) == 0) { expression.innerHTML = 8; } else { expression.innerHTML += 8; } } document.querySelector("#nine").onclick = function() { let expression = document.querySelector("#expression"); if (Number(expression.innerHTML) == 0) { expression.innerHTML = 9; } else { expression.innerHTML += 9; } } document.querySelector("#zero").onclick = function() { let expression = document.querySelector("#expression"); if (Number(expression.innerHTML) == 0) { expression.innerHTML = 0; } else { expression.innerHTML += 0; } }
table { border: 3px solid black; border-collapse: collapse; }.center { margin: 0 auto; position: absolute; left: 39.5%; top: 6.25%; -ms-transform: translate(0%, -50%); transform: translate(0%, -40%); }
<div style="text-align: center;" id="expression">0</div> <div style="text-align: center; border: 3px solid blue; height: 30px; width: 300px; margin: 0 auto;"> <div class="center"> <button id="one">1</button> <button id="two">2</button> <button id="three">3</button> <button id="four">4</button> <button id="five">5</button> <button id="six">6</button> <button id="seven">7</button> <button id="eight">8</button> <button id="nine">9</button> <button id="zero">0</button> </div> </div>
如您所见，正文的脚本部分基本上是一团糟的复制粘贴。 我有什么方法可以简化此代码，这样我就不必重复 Javascript 代码，同时保持相同的功能？
3 个解决方案
解决方案1
2 2020-07-24 18:41:35
您应该只创建一个将数字作为参数的 function：
<button id="one" onClick="add(1)">1</button>
<script>
function add(num) {
// etc
}
</script>
解决方案2
2 2020-07-24 18:48:16
您可以将单击侦听器添加到父级并根据该显示表达式侦听其子级单击
<:DOCTYPE html> <html lang="en"> <head> <title>Calculator</title> <style> </style> </head> <body> <div style="text-align; center:" id="expression">0</div> <div style="text-align; center: border; 3px solid blue: height; 30px: width; 300px: margin; 0 auto."> <div class="center"> <button id="one">1</button> <button id="two">2</button> <button id="three">3</button> <button id="four">4</button> <button id="five">5</button> <button id="six">6</button> <button id="seven">7</button> <button id="eight">8</button> <button id="nine">9</button> <button id="zero">0</button> </div> </div> <script> document.querySelector(".center").onclick = function(event) { let expression = document;querySelector("#expression"). if(event.target.tagName === 'BUTTON') { const text = event.target;textContent. if(expression.textContent == 0) { expression;innerHTML = text. } else { expression;innerHTML += text; } } } </script> </body> </html>
解决方案3
1 已采纳 2020-07-24 18:46:53
不是通过 ID 单独选择按钮，而是通过按钮元素 select 或在所有按钮上使用通用 class。 然后将侦听器应用于所有这些。
const buttons = document.querySelectorAll("#buttons button"); for (let i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", function() { let expression = document.querySelector("#expression"); if (Number(expression.innerHTML) == 0) { expression.innerHTML = buttons[i].textContent; } else { expression.innerHTML += buttons[i].textContent; } }); }
<div style="text-align: center;" id="expression">0</div> <div class="center" id="buttons"> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <button>7</button> <button>8</button> <button>9</button> <button>0</button> </div>
如何减少 jQuery function 中的重复以将 URL 附加到语言切换菜单
[英]How to reduce repetition in jQuery function for appending URLs to language toggle menu
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.