Automatically link button to element

JavaScript
1

Hi,

I want to have a few buttons for a webserver on a microcontroller. I want the buttons to change color once they have been clicked. Green for on and red for off. For now I used an extra button.
How can I link the element to the “but” variable I already created? I want to automatically link it to the button I cliked.

This is my code so far:

<!DOCTYPE html>
<html>
<body>

<h2>Turning Buttons ON/OFF</h2>

<p id="demo"></p>
<p id="demo2"></p>

<button id="but" name="but1" onclick="clickBut(this.name);">Button1</button>
<button id="but" name="but2" onclick="clickBut(this.name);">Button2</button>
<button id="but" name="but3" onclick="clickBut(this.name);">Button3</button>
<br>
<br>
<button id="but on">ON/OFF</button>


<script>

// Create an object of the buttons
const buttons = [
				{  	name: "but1",
                	prevState: false,
                	curState: false,
                    colState: "OFF"
                },
                {	name: "but2",
                	prevState: false,
                    curState: false,
                    colState: "OFF"
                },
                {	name: "but3",
                	prevState: false,
                    curState: false,
                    colState: "OFF"
                }];
                
// Set all buttons OFF at start of script
const x = document.getElementsByTagName("button");
    for( i = 0; i< x.length; i++ ){
    	x[i].style.background = "#EC6666";
    }


// Function to define the clicked button and change the state of the clicked button
function clickBut(but){
	
    // Display the copied name of the button
	document.getElementById("demo").innerHTML = but;
    
    // Temporary variable button stores name of the clicked button.
    let button = buttons.find(buttons => buttons.name == but);
    
    if(button.prevState == false && button.curState == false)
    {
    	button.curState = !button.prevState;
        button.prevState = !button.prevState;
        button.colState = "ON";
    }
    else if(button.prevState == true && button.curState == true)
    {
    	button.curState = !button.prevState;
        button.prevState = !button.prevState;
        button.colState = "OFF";
    }
    else if(button.prevState == true && button.curState == false)
    {
    	button.curState = !button.prevState;
        button.prevState = !button.prevState;
    }
    else // prevState false, curState true
    {
    	button.curState = !button.prevState;
        button.prevState = !button.prevState;
    }
    
    
    // Display the state of the clicked button
    document.getElementById("demo2").innerHTML = "Name:" + button.name + " Previous State:" + button.prevState +" Current State:" + button.curState + " Color State:" + button.colState;
    /*
    if(button.colState == "OFF")
    {
    	document.getElementById("but on").style.background = "#EC6666";
    }
    else document.getElementById("but on").style.background = "#7CEC66";
    */
    switch(button.colState)
    {
       
    	case "OFF":
        	const btn = document.querySelector("button");
			document.getElementById("but on").style.background = "#EC6666";
        
        break;
        
        case "ON":
			document.getElementById("but on").style.background = "#7CEC66";
            
        break;
    }
    
}

</script>

</body>
</html>
2

an id must be unique within the document

1 Like
3

how i would prolly try handle such feature is create a class named “on” for example, which applies green color to whatever butto has it. Id also use class to group up buttons and apply similar styling, instead of target them with single id(as you have been warned).

.btn {
  background-color: red;
}
.btn.on {
  background-color: green;
}

You can target the buttons by their “btn” class(use any name you like here) and attach event handlers on click, or you can directly put the handler function on their click event. You can use the handler function innate event object. Its an object argument all event handler functions recieve(as far as im aware of :stuck_out_tongue: ) and you can access it by defining a parameter for the function. Good practice is to name it “e”, or “event”, or “evt”, just something to explicitely point humans that this infact should represent the event object. The event object is cool as it carry info for the element that produced the event and offers easy target for it. Here is how a simple handler could look, without extra features:

function toggleBtn(evt){
  const btn=evt.target  //the button that trigger the event
  const btnClasses=btn.classList

  btnClasses.toggle('on')  //adds "on" class, or removes it, if its already present
}

EDIT: got rid of some wrong bits

4

Ok thanks for the help. I’ll try to wrap my head around it. I’m afraid this last bit:

Is a bit much for my current coding skills. But thanks!

5

im sorry, i have misguided you with wrong code. I applied notions from React JSX, which are not valid for inline HTML.
Please look on this page on how to properly achieve your task:

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.