[英]Use a button click to make a variable in JS
I have five possible buttons to push and each of these buttons runs the same function.我有五个可以按下的按钮,每个按钮都运行相同的功能。 But I would also like that button push to make a unique global variable too.但我也希望按下按钮来创建一个唯一的全局变量。 A variable that says "this button was pushed so add this "word" where ever needed.一个变量表示“这个按钮被按下,所以在需要的地方添加这个“词”。
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);
So they all run exactly the same function but the "One" or "Two" or "Three" string needs to become a global variable.所以它们都运行完全相同的函数,但“一”或“二”或“三”字符串需要成为一个全局变量。 I later use these to make some numbers:我后来用这些来制作一些数字:
For example I would use "One" to make one of these outcomes:例如,我会使用“一”来产生以下结果之一:
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"];
I am at a bit of a loss on how to call this to make it a global.我对如何调用它以使其成为全球性感到有些茫然。 I tried making a function inside the function but it seemed to cause the other function to stop.我尝试在函数内部创建一个函数,但它似乎导致另一个函数停止。 So I am guessing I have made a syntax error somewhere.所以我猜我在某个地方犯了一个语法错误。
I tried doing an onclick="myFunction(this.id)"
function as well as the EventListener but this didn't seem to work either.我尝试做一个onclick="myFunction(this.id)"
函数以及 EventListener 但这似乎也不起作用。
A pointer in the right direction would definitely be helpful.指向正确方向的指针肯定会有所帮助。 I have done searches, but these all seem to produce local variables at best.我已经做过搜索,但这些似乎最多只能产生局部变量。
Thanks :)谢谢 :)
You can do it like this:你可以这样做:
querySelectorAll
to get all buttons and... querySelectorAll
获取所有按钮和...forEach
and add your event handler for clicks ...使用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
to save the id of the clicked button创建一个全局变量mapNumber
来保存被点击按钮的 idvar
and not let
so that is can be accessed using window.variablename
更新:注意 - 您需要使用var
而不是let
以便可以使用window.variablename
访问mapNumber
:创建一个函数来处理点击,我们可以获得 id 来告诉我们哪个按钮被点击,并将其用于mapNumber
:var mapNumber;
function processClick() {
mapNumber= this.id; // the id of the clicked button
}
Working Example:工作示例:
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, eg 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>
You can make something a global by putting window.
您可以通过放置 window.open 来使某些东西成为全局的window.
in front of it.在它面前。
Example:例子:
function notInGlobalScope() { window.str = "I'm in global scope!"; } notInGlobalScope(); console.log(str);
In your example:在你的例子中:
function Variables() { if (this.id = "One" || "Three" || "Four") { window.climate = ["dry", "light rain", "medium rain", "heavy rain", "light snow", "medium snow", "heavy snow", "light ice", "very icy", "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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.