如何解决使用按钮单击以在JS中
我有五个可能要按下的按钮,每个按钮都运行相同的功能。但是我也希望该按钮也可以创建唯一的全局变量。一个说“按下此按钮的变量,因此请在需要的地方添加”这个单词”。
document.getElementById("One").addEventListener("click",Variables);
document.getElementById("Two").addEventListener("click",Variables);
document.getElementById("Three").addEventListener("click",Variables);
document.getElementById("Four").addEventListener("click",Variables);
document.getElementById("Five").addEventListener("click",Variables);
因此它们都运行完全相同的函数,但是“一个”或“两个”或“三个”字符串需要成为全局变量。稍后,我将使用这些数字生成一些数字:
例如,我将使用“一个”得出以下结果之一:
if (mapNumber = "One" || "Three" || "Four") {
climate = ["dry","light rain","medium rain","heavy rain","light snow","medium snow","heavy snow","light ice","very icy","severe ice"];
在如何使它成为全球性的方法上我有点茫然。我尝试在函数内部创建一个函数,但似乎导致另一个函数停止。所以我想我在某个地方犯了语法错误。
我尝试做一个onclick="myFunction(this.id)"
以及EventListener函数,但这似乎也不起作用。
正确方向的指针肯定会有所帮助。我已经做过搜索,但是这些似乎充其量只能产生局部变量。
谢谢:)
解决方法
您可以这样做:
- 为按钮添加带有类或ID的容器,以便我们轻松选择所有按钮
-
querySelectorAll
获取所有按钮和... - ...使用
forEach
遍历这些内容,并为点击添加事件处理程序
// Get all buttons
const mybuttons = document.querySelectorAll('.mybuttons button');
// loop through the buttons and add the event listener to each button
mybuttons.forEach(mybutton => {
mybutton.addEventListener('click',processClick);
});
- 创建一个全局变量
mapNumber
来保存单击按钮的ID
更新:注意-您需要使用var
而不是let
,以便可以使用window.variablename
进行访问。
- 创建一个函数来处理单击,我们可以获得ID来告诉我们单击了哪个按钮,并将其用于
mapNumber
:
var mapNumber;
function processClick() {
mapNumber= this.id; // the id of the clicked button
}
工作示例:
var mapNumber;
var climate;
//get all buttons in the mybuttons container
const mybuttons = document.querySelectorAll('.mybuttons button');
// add the event listener to each button
mybuttons.forEach(mybutton => {
mybutton.addEventListener('click',processClick);
});
function processClick() {
// save the id of the clicked button as mapNumber
window.mapNumber = this.id;
// set climate variable based on which was clicked,e.g.
switch(window.mapNumber){
case "One":
case "Three":
case "Four":
climate = ["dry","light rain","medium rain","heavy rain","light snow","medium snow","heavy snow","light ice","very icy","severe ice"];
break;
case "Two": climate = ["Two's climate"]; break;
case "Five": climate = ["Five's climate"]; break;
}
// Display the mapNumber,just to show its working :)
document.getElementById('mapNumber').innerHTML = "mapNumber: "+window.mapNumber;
document.getElementById('climate').innerHTML = "Climate: "+climate;
}
<div class="mybuttons">
<button id="One">One</button>
<button id="Two">Two</button>
<button id="Three">Three</button>
<button id="Four">Four</button>
<button id="Five">Five</button>
</div>
<div id="mapNumber">mapNumber:</div>
<div id="climate">Climate:</div>
,
您可以将window.
置于全局范围内。
示例:
function notInGlobalScope() {
window.str = "I'm in global scope!";
}
notInGlobalScope();
console.log(str);
在您的示例中:
function Variables() {
if (this.id = "One" || "Three" || "Four") {
window.climate = ["dry","severe ice"];
}
}
document.getElementById("One").addEventListener("click",Variables);
document.getElementById("Two").addEventListener("click",Variables);
document.getElementById("Three").addEventListener("click",Variables);
document.body.onclick = ()=>{
if(window.climate) {
console.log(climate);
}
}
body {
min-height:30vh;
}
<button id="One">1</button>
<button id="Two">2</button>
<button id="Three">3</button>
<p>Click anywhere to get value of climate</p>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。