使用按钮单击以在JS中

如何解决使用按钮单击以在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函数，但这似乎也不起作用。

正确方向的指针肯定会有所帮助。我已经做过搜索，但是这些似乎充其量只能产生局部变量。

谢谢：）

解决方法

您可以这样做：

1. 为按钮添加带有类或ID的容器，以便我们轻松选择所有按钮
2. querySelectorAll获取所有按钮和...
3. ...使用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);
});

1. 创建一个全局变量mapNumber来保存单击按钮的ID
   更新：注意-您需要使用var而不是let，以便可以使用window.variablename
进行访问。
2. 创建一个函数来处理单击，我们可以获得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>