New to html,css, and javascript. I am having trouble passing variables to my javascript function from a drop down menu onclick
Question
I assume I am making a syntax error, but not able to find an example close to mine on google. Would love any help anyone is willing to provide. I just started working in HTML, CSS, and JavaScript today. I thought it might be how I am passing the values to the function. However when I look up passing values it seems like functionName(value) is the correct format.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
// Function to change webpage background color
function changeBodyBg(color){
document.body.style.background = color;
}
</script>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#" onclick="changeBodyBg(red)">Red</a>
<a href="#" onclick="changeBodyBg(blue)">Blue</a>
<a href="#" onclick="changeBodyBg(green)">Green</a>
</div>
</div>
</body>
</html>
2 answers
solution1
3 2020-09-23 17:47:13
You simply need single quotes '' around your string function arguments. When you use just a color name, your code is looking for a variable named red / green / blue , and not interpreting it as a string.
<a href="#" onclick="changeBodyBg('red')">Red</a>
<a href="#" onclick="changeBodyBg('blue')">Blue</a>
<a href="#" onclick="changeBodyBg('green')">Green</a>
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> // Function to change webpage background color function changeBodyBg(color){ document.body.style.background = color; } </script> <style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #ddd;} .dropdown:hover .dropdown-content {display: block;} .dropdown:hover .dropbtn {background-color: #3e8e41;} </style> </head> <body> <h2>Hoverable Dropdown</h2> <p>Move the mouse over the button to open the dropdown menu.</p> <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#" onclick="changeBodyBg('red')">Red</a> <a href="#" onclick="changeBodyBg('blue')">Blue</a> <a href="#" onclick="changeBodyBg('green')">Green</a> </div> </div> </body> </html>
solution2
0 2020-09-23 17:55:30
When you pass a string to a function as a parameter it needs to be in quotes. If your function is already in double quotes, you can use single quotes to pass the string. Like this -
onclick="changeColor('myColor')"
So the correct syntax will be
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#" onclick="changeBodyBg('red')">Red</a>
<a href="#" onclick="changeBodyBg('blue')">Blue</a>
<a href="#" onclick="changeBodyBg('green')">Green</a>
</div>
</div>
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.