How to best define multiple variables?

Question

First off I would like to say that I programmed a LONG time ago at school but I had alot of trouble getting into programming cause of ADD, so now I'm just 'trying' stuff at my own tempo with no pressure so I can pace it reall slow, but that does mean I'm a complete beginner, I know only snippets of some languages.

Now onto the problem, what I want to do eventually is change text color through a button click, so if I click a button with the label blue I want the text to turn blue and same with red etc.

So what I have is 2 buttons,

<button type="button" id="redButton" onclick="changeText()" value="red">Red</button>
<button type="button" id="blueButton" onclick="changeText()" value="blue">Blue</button>

Now in my javascript file I have the following:

var rButton = document.getElementById("redButton");
var bButton = document.getElementById("blueButton");

And I can alert both var with their value and it shows the value.

What I can't seem to figure is how to perhaps put rButton & bButton in a new var like

var cButton = [rButton, bButton];

Or something along those lines. Cause I can put cButton into an if statement right now and say this like:

if(cButton = document.getElementById("redButton"))
{
    alert("Hello!");
}
else if(cButton = document.getElementById("blueButton"))
{
    alert("Hello hello");
}
else
{
    alert("Error!");
}

But that will only show Hello! and not Hello Hello even though I do press my blue button.

It's probably something realy stupid but I can't figure it out, and I haven't found much on google that I tried that worked.

Also yes changeText() is the function name which is where all this stuff is in.

Maybe some basics first: guru99.com/difference-equality-strict-operator-javascript.html — connexo
– connexo, Commented Nov 1, 2020 at 13:09
@connexo in that case, also the author seems to be following the wrong approach. — Dhruvi Makvana
– Dhruvi Makvana, Commented Nov 1, 2020 at 13:10

RajathaDH · Accepted Answer · 2020-11-01 13:23:39Z

1

If checking the colour is what you want to do, you can do it easily by simply passing the colour to the function as a parameter like this.

<button type="button" id="redButton" onclick="changeText('red')" value="red">Red</button>
<button type="button" id="blueButton" onclick="changeText('blue')" value="blue">Blue</button>

And then in in your javascript change your function to something like this.

function changeText(col){
    if(col == "red")
    {
        alert("Hello!");
    }
    else if(col == "blue")
    {
        alert("Hello hello");
    }
    else
    {
        alert("Error!");
    }
}

Also when you want to compare two values use == (comparison), when you use = (assignment) it will assign the value.

answered Nov 1, 2020 at 13:23

RajathaDH

1212 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Blackbeared Over a year ago

That is actually alot easier than what I was trying to do with the getElementById stuff, and it's now easier to change text seeing as it recognises which buttons are pressed!

Dhruvi Makvana · Accepted Answer · 2020-11-01 13:07:45Z

1

No need to get a reference to two different buttons. Instead, you can pass the color in the function call itself.

var textRef = document.getElementById("text");

function changeText(newColor){
  console.log(textRef)
  textRef.style.color =  newColor;
}

<button type="button" onclick="changeText('red')" value="red">Red</button>
<button type="button" onclick="changeText('blue')" value="blue">Blue</button>

<p id="text">I am the text!!</p>

answered Nov 1, 2020 at 13:07

Dhruvi Makvana

9135 silver badges17 bronze badges

5 Comments

lissettdm Over a year ago

This is more clean, I like it :).

Dhruvi Makvana Over a year ago

Please accept the solution if it has resolved your issue. Happy to Help.

lissettdm Over a year ago

I only can to vote up, I can't accept it, sorry, .The question was made by @Blackbeared,

connexo Over a year ago

Inline event listeners are never "clean".

Dhruvi Makvana Over a year ago

Interpretation of 'clean' can be different for different codebases and problems. I think for such a small functionality it would be CLEAN.

Ali BEN AMOR · Accepted Answer · 2020-11-01 13:22:53Z

0

Try this

let cButton = document.querySelectorAll('.btn');
cButton.forEach(element => {
  if (element.id === 'redButton') {
    alert('Hello');
  } else if (element.id === 'blueButton') {
    alert('Hello Hello');
  } else {
    alert('Error');
}
})

Concerning what you said here

But that will only show Hello! and not Hello Hello even though I do press my blue button. You can add an event listener like this :

cButton.forEach(element => {
  element.addEventListener('click', (e) => {
  if (e.target.id === 'redButton') {
    alert('Hello');
  } else if (e.target.id === 'blueButton') {
    alert('Hello Hello');
  } else {
    alert('Error');
}
})
})

Note: That you have to add class="btn" in each button

answered Nov 1, 2020 at 13:22

Ali BEN AMOR

3043 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to best define multiple variables?

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related