Question

我正在尝试使用带有onclick功能的javascript来显示文本。

i）当我点击两个按钮时，它只显示红色，而不是蓝色。

ii）同样，当我第一次点击红色按钮时，它会显示红色，如果我再次选择红色按钮，则会显示蓝色。

function myFunction() {


  if (document.getElementById("demo").value == "11") {
    document.getElementById("flight").innerHTML = "<p style='color:red'>Red Color</p>";
  }

  if (document.getElementById("demo").value == "22") {
    document.getElementById("flight").innerHTML = "<p style='color:blue'>Blue Color</p>";
  }

}

<button id="demo" onclick="myFunction()" value="11">Red</button>
<button id="demo" onclick="myFunction()" value="22">Blue</button>
<div id="flight"></div>

Answer 1

正如您在评论中看到的那样，ID 应该是唯一的。否则，它会搞砸你的JS。

我建议你将当前的DOM元素传递给你的函数，然后像这样使用它：

＆＃13;

function myFunction(elem) {
  switch(elem.getAttribute('value')) {
    case "11":
      document.getElementById("flight").innerHTML = "<p style='color:red'>Red</p>";
      break;
    case "22":
      document.getElementById("flight").innerHTML = "<p style='color:blue'>Blue</p>";
      break;
  }
}

＆＃13;

<button onclick="myFunction(this)" value="11">Red</button>
<button onclick="myFunction(this)" value="22">Blue</button>
<div id="flight"></div>

＆＃13;

Answer 2

Ids在您的文档中必须是唯一的。浏览器始终只识别id为 flight 的第一个按钮，并因此丢弃第二个按钮。

相反，您可以使用多个事件处理程序解决问题：

＆＃13;

function displayRed() {
  document.getElementById("flight").innerHTML = "<p style='color:red'>Red Color</p>";
}

function displayBlue() {
  document.getElementById("flight").innerHTML = "<p style='color:blue'>Blue Color</p>";
}

＆＃13;

<button onclick="displayRed()" value="11">Red</button>
<button onclick="displayBlue()" value="22">Blue</button>
<div id="flight"></div>

＆＃13;

Answer 3

试试这个：

Html：

<button onclick="myFunction(this)" value="11">Red</button>

<button onclick="myFunction(this)" value="22">Blue</button>

<div id="flight"> </div>

JavaScript：

function myFunction(x) {

if (x.value == "11")
 document.getElementById("flight").innerHTML = "<p style='color:red'>Red Color</p>";

else if (x.value == "22")
   document.getElementById("flight").innerHTML = "<p style='color:blue'>Blue Color</p>";

}

最终代码：

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<button class="demo" onclick="myFunction(this)" value="11">Red</button>
<button class="demo" onclick="myFunction(this)" value="22">Blue</button>
<div id="flight"> </div>

<script>
    
function myFunction(x) {
    
    if (x.value == "11")
            document.getElementById("flight").innerHTML = "<p style='color:red'>Red Color</p>";
    
    else if (x.value == "22")
       document.getElementById("flight").innerHTML = "<p style='color:blue'>Blue Color</p>";

}
</script>

</body>
</html>

＆＃13;

Javascript onclick函数不显示分配的文本

3 个答案: