Barry asked 4 years ago
I started with ebook Web Servers example 2.2. Now I want to change from the sliders to click type buttons that will change color when clicked and activate a relay. Eventually I want the buttons to be mutually exclusive.
I attempt to click the button but nothing happens.
HTML – I think this is correct, but I do NOT see a GET in the URL
<p class="card-title"><i class="fas fa-lightbulb"></i>Select 1</p>
<label class="button"> // define in CSS
<input type="button" onclick="aselect(this)" id="1"> // name of function in JS
<span class="button-on"></span> //???????????? this could be wrong
</label>
JS - I admit I don't fully understand this.
// Copied from RNT book example 2.2 and converted slightly
function aselect(element) {
var xhr = new XMLHttpRequest();
if (element.checked) {
xhr.open("GET", "/update?output=" + element.value + "&state=1, true);
document.getElementById(element.id+"s").innerHTML = "ON";
}
else {
xhr.open("GET", "/update?output=" + element.value + "&state=0, true);
document.getElementById(element.id+"s").innerHTML = "OFF";
}
xhr.send();
}
CSS I added this to the end of the example JS
button {
border: none;
background-color: gray;
color: black;
padding: 50px 50px;
text-align: center;
text-decoration: none;
font-size: 16px;
width: 100px;
border-radius: 4px;
transition-duration: 0.4s;
}
.button-on {
background-color: #00FF00;
}
.button-on:hover {
background-color: #008800;
}
.button-off {
background-color: gray;
}
.button-off:hover {
background-color: #252524;
}
Barry answered 4 years ago
I was able to follow this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox
and get check boxes. I’ve embedded the <style> in the HTML file as shown on the w3school page. Now I’d like to move that to the .CSS page if possible.
Sara Santos Staff answered 4 years ago
Hello Barry,
If you already have the CSS working, you just need to move the CSS selectors – everything inside the <style> tags to the style.css file.
Barry answered 4 years ago
I have 4 relays and need the selection to be a single relay. The type=radio is the desired operation, however I don’t want a Submit button.
I’d thought of doing the logic in the JS but don’t really know that very well. My preference would be to do it all in C.
What do you suggest.
Steve Mercer answered 4 years ago
If you want to do what you want with a web page then you’ll need to learn HTML, Javascript and CSS. The problem with your code is that you have a button and you’re checking if it’s “checked”:
if (element.checked)
You already know the button was clicked as you have an “onclick()” function. If you just remove that “if” you will GET /update…. being sent.
Radio buttons also have an onclick() event that you could use to send something to the code to activate a specific relay and deactivate the rest.
Barry answered 4 years ago
Steve – Thanks for the comment. I had found that error and corrected it, but not updated the forum. I’m struggling through JS and CSS. By ancient CS degree predates HTML and JS. I understand the concepts but am woefully short of syntax knowledge. Google finds lots of hits when I search, but many are unresolved forum posts on the various websites.
My big picture is that I have taken the RNT WiFiMgr example and am attempting to merge the websockets example. Then I want to change the sliders to clickable buttons or checkboxes which need to be mutually exclusive. Unfortunately I’m also doing pcb layout and mech CAD too. Not enough hours in the day. Maybe not enough brain cells too!
Steve Mercer answered 4 years ago
Same here. I learned programming at an early age and just adapt for anything new. The concepts are the same, the syntax changes. I would stick with w3schools for anything you want to know.
Checkboxes CAN be mutually exclusive but you would have to do it in Javascript. Radio buttons are mutually exclusive by default.
The best idea is to give some stuff a try. If it doesn’t work post here and we will see if we can help.