Reputation: 1109
I'm trying to understand javascript and javascript functions. This function is used to change the look of a button.
function changeButton(){
btn.style.backgroundColor = btn.style.backgroundColor == "black" ? "white" : "black";
btn.style.color = btn.style.color == "white" ? "black" : "white";
btn.innerHTML = btn.innerHTML == 'GOOD JOB' ? 'CLICK ME' : 'GOOD JOB';
}
It works just fine. But when I look at this function I see a lot of repetition. The basic structure seems to be element = element == value1 ? value2 : value1
So in my mind this should work:
function toggleValue(elem, val1, val2){
elem = elem == val1 ? val2 : val1
}
function changeButton(){
var x = btn.style.backgroundColor
var y = btn.style.color
var z = btn.innerHTML
toggleValue(x, 'white', 'black')
toggleValue(y, 'black', 'white')
toggleValue(z, 'CLICK ME', 'GOOD JOB')
}
But it does not work and I don't understand why. Can someone tell me why this doesn't work? And is there a way to make it work?
Upvotes: 2
Views: 95
Reputation: 386883
It does not work, because you hand over a primitive value an not a reference to the property.
function toggleValue(elem, prop, val1, val2){
elem[prop] = elem[prop] == val1 ? val2 : val1
}
function changeButton(){
toggleValue(btn.style, 'backgroundColor', 'white', 'black')
toggleValue(btn.style, 'color', 'black', 'white')
toggleValue(btn, 'innerHTML', 'CLICK ME', 'GOOD JOB')
}
Upvotes: 4
Reputation: 262
function toggleValue(elem, val1, val2, ButtonStyleType) {
elem = elem == val1 ? val2 : val1;
if (ButtonStyleType == 'backgroundColor')
btn.style.backgroundColor = elem;
else if (ButtonStyleType == 'color')
btn.style.color = elem;
else if (ButtonStyleType == 'innerHtml')
btn.innerHTML = elem;
}
function changeButton() {
var x = btn.style.backgroundColor;
var y = btn.style.color;
var z = btn.innerHTML;
toggleValue(x, 'green', 'yellow', 'backgroundColor');
toggleValue(y, 'black', 'Orange', 'color');
toggleValue(z, 'Default', 'GOOD JOB', 'innerHtml');
}
<button id="btn" style="background-color:green; color:black;">Default</button><br />
<br />
<a style="cursor:pointer;color:blue;" onclick="changeButton();">Click here to update button style</a>
Upvotes: 1
Reputation: 445
You have to understand the difference between pass by value and pass by reference to know more about that click here
Upvotes: 0
Reputation: 68443
Because you are passing the String which is immutable.
You can create one more argument - property.
function toggleValue(elem, prop, val1, val2){
elem[prop] = elem[prop] == val1 ? val2 : val1
}
function changeButton(){
var x = btn.style;
var y = btn.style;
var z = btn;
toggleValue(x, "backgroundColor", 'white', 'black');
toggleValue(y, "color", 'black', 'white');
toggleValue(z, "innerHTML", 'CLICK ME', 'GOOD JOB');
}
Upvotes: 3