CODEWITHSUNDEEP
javascripthtmlvariablesonclickaddeventlistener
Paul Davis
Paul Davis

Reputation: 525

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.

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 :)

Upvotes: 0

Views: 3102

Answers (2)

FluffyKitten
FluffyKitten

Reputation: 14312

You can do it like this:

  1. Add a container with a class or id for your buttons so we can select them all easily
  2. querySelectorAll to get all buttons and...
  3. ...loop through these using forEach and add your event handler for clicks
// 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. Create a global variable mapNumber to save the id of the clicked button
    UPDATE: Note - you need to use var and not let so that is can be accessed using window.variablename
  2. Create a function to handle the click and we can get the id to tell us which button was clicked and use this for 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, 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>

Upvotes: 2

Nate Levin
Nate Levin

Reputation: 1118

You can make something a global by putting 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>

Upvotes: 1

Related Questions