html、css 和 javascript 的新手。我无法从 onclick 的下拉菜单中将变量传递给我的 javascript 函数

Question

我假设我犯了一个语法错误，但无法在谷歌上找到一个接近我的例子。 希望任何人都愿意提供任何帮助。 我今天刚开始使用 HTML、CSS 和 JavaScript。 我认为这可能是我将值传递给函数的方式。 但是，当我查找传递值时， functionName(value) 似乎是正确的格式。

<!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>

Answer 1

您只需要在字符串函数参数周围加上单引号'' 。 当您只使用颜色名称时，您的代码正在寻找名为red / green / blue的变量，而不是将其解释为字符串。

<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>

Answer 2

当您将字符串作为参数传递给函数时，它需要放在引号中。 如果您的函数已经在双引号中，您可以使用单引号来传递字符串。 像这样 -

onclick="changeColor('myColor')"

所以正确的语法是

<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>

html、css 和 javascript 的新手。我无法从 onclick 的下拉菜单中将变量传递给我的 javascript 函数

问题描述

2 个解决方案

解决方案1
3 2020-09-23 17:47:13

解决方案2
0 2020-09-23 17:55:30

html、css 和 javascript 的新手。 我无法从 onclick 的下拉菜单中将变量传递给我的 javascript 函数

问题描述

2 个解决方案

解决方案1 3 2020-09-23 17:47:13

解决方案2 0 2020-09-23 17:55:30

html、css 和 javascript 的新手。我无法从 onclick 的下拉菜单中将变量传递给我的 javascript 函数

解决方案1
3 2020-09-23 17:47:13

解决方案2
0 2020-09-23 17:55:30