Log the selected value from radio button in Javascript
Question
I'm trying to create a dropdown list with radio buttons where you can select several different styles for the web page.
I first want to try to console.log whenever I select a different color. Every time I select a different color, it still logs the color black.
This is my html code:
<form>
<label><input type="radio" name="styleColor" id="black" checked="checked" onclick="styleChange()"/>Black</label>
<div class="dropdown-divider"></div>
<label><input type="radio" name="styleColor" id="red" onclick="styleChange()">Red</label>
<div class="dropdown-divider"></div>
<label><input type="radio" name="styleColor" id="green" onclick="styleChange()">Green</label>
<div class="dropdown-divider"></div>
<label><input type="radio" name="styleColor" id="blue" onclick="styleChange()">Blue</label>
</form>
And my Javascript code:
function styleChange() {
if (document.getElementById("black").selected = true) {
console.log("Color selected: Black")
}
else if (document.getElementById("red").selected = true) {
console.log("Color selected: Red")
}
else if (document.getElementById("green").selected = true) {
console.log("Color selected: Green")
}
else if (document.getElementById("blue").selected = true) {
console.log("Color selected: Blue")
}
}
3 answers
solution1
1 2020-09-23 10:57:13
You could add onChange event listener to every radio button and call a method whenever the onChange event occurs.
document.querySelectorAll("input").forEach(item => { item.addEventListener("change", () => { console.log(item.id) }) })
<form> <label><input type="radio" name="styleColor" id="black" checked="checked"/>Black</label> <div class="dropdown-divider"></div> <label><input type="radio" name="styleColor" id="red">Red</label> <div class="dropdown-divider"></div> <label><input type="radio" name="styleColor" id="green">Green</label> <div class="dropdown-divider"></div> <label><input type="radio" name="styleColor" id="blue">Blue</label> </form>
solution2
1 ACCPTED 2020-09-23 11:13:39
Just change selected to checked and don't use single equal in if condition, it should be double equal. code below.
function styleChange() {
if (document.getElementById("black").checked) {
console.log("Color selected: Black")
}
else if (document.getElementById("red").checked) {
console.log("Color selected: Red")
}
else if (document.getElementById("green").checked) {
console.log("Color selected: Green")
}
else if (document.getElementById("blue").checked) {
console.log("Color selected: Blue")
}
}
demo https://jsbin.com/giberegora/edit?html,js,console,output
solution3
0 2020-09-23 11:43:49
I strongly recommend you use jquery it easy to use and more productive as compared to javascript code and one more thing I change "id" to "value" for checking which radio button is selected please check the below code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<form>
<label><input type="radio" name="styleColor" value="black" onclick="styleChange()"/>Black</label>
<div class="dropdown-divider"></div>
<label><input type="radio" name="styleColor" value="red" onclick="styleChange()">Red</label>
<div class="dropdown-divider"></div>
<label><input type="radio" name="styleColor" value="green" onclick="styleChange()">Green</label>
<div class="dropdown-divider"></div>
<label><input type="radio" name="styleColor" value="blue" onclick="styleChange()">Blue</label>
</form>
</body>
<script>
function styleChange(){
alert($("input[name='styleColor']:checked").val());
}
</script>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.