Question

我想在此项目结束时创建图表，并为您要创建的图表选择一些选项。有一个下拉列表，其中包含几个选项：您想要的图表类型以及要包含在其中的数据的复选框。对于我的问题，我想编写一个if else语句，当语句为真时给我一个反馈，它应该向我显示一个“true”的警告。

我已经有一个函数可以获取列表的选定值，但是如果我构建if else语句，我就不会得到预期的结果。因此，我会告诉你代码：

<button id="button" onclick="function2()"><strong>create Chart</strong> </button>

<script>

      function getSelectValue()
      {
          var selectedValue=document.getElementById("Grafikliste").value;
          console.log(selectedValue)
      }
      getSelectValue();


      if (selectedValue=="balkendiag")
      {
         button.onclick(alert("True"))
      }
      else {
          alert("Error!!!")
      }
  }

在这里您可以看到列表的代码

<select id ="Grafikliste" onchange="getSelectValue()">
        <option value="balkendiag">Balkendiagramm</option>

Answer 1

您的代码中存在一些问题。

如果/其他方式无法正常工作：

这是范围问题。 Read more about this here

您的selectedValue变量是getSelectedValue函数的本地变量。从你的功能之外看不到它。

您可以通过将其声明为全局变量来修复它，例如：

var selectedValue; 
function getSelectValue() {
  selectedValue=document.getElementById("Grafikliste").value;
  console.log(selectedValue)
}
getSelectValue();

if (selectedValue=="balkendiag") {
  button.onclick(alert("True"))
} else {
  alert("Error!!!")
}

或让你的函数返回值：

function getSelectValue() {
  var selectedValue=document.getElementById("Grafikliste").value;
  console.log(selectedValue);
  return selectedValue;
}


if (getSelectValue() =="balkendiag") {
  button.onclick(alert("True"))
} else {
  alert("Error!!!")
}

<强> 2。事件处理

要对用户事件做出反应（例如点击按钮），您不应在HTML按钮中使用onclick，而应使用addEventListener功能。

所有修复的代码段：

function getSelectValue()
{
    var selectedValue=document.getElementById("Grafikliste").value;
    console.log(selectedValue);
    return selectedValue;
}

function function2() {

    if (getSelectValue()=="balkendiag")
    {
       alert("True");
    } else {
        alert("Error!!!");
    }
}

document.getElementById("button").addEventListener("click", function2);
document.getElementById("Grafikliste").addEventListener("change", function2);

<button id="button"><strong>create Chart</strong> </button>

<select id="Grafikliste" >
        <option value="balkendiag">Balkendiagramm</option>
</select>

Answer 2

您在getSelectValue函数中使用了带有关键字var的selectedValue，将关键字限制为该函数的本地关键字。考虑删除var以解决您的问题

Answer 3

首先，不推荐使用内联侦听器（onclick=""）

<button id="create"><strong>create Chart</strong> </button>
<select id ="diagramType">
    <option value="balkendiag">Balkendiagramm</option>
    <option value="baumdiag">Baumdiagramm</option>
</select>

现在在js代码中，我们首先需要等待要加载的页面，然后我们可以获取我们的元素并为按钮分配一个监听器，并在单击按钮时获取select的值：

 window.onload = function(){
   //get the elements
   const diagramType = document.getElementById("diagramType"),
         create = document.getElementById("create");
   //if create was clicked
   create.onclick = function(){
     //switch based on fhe diagramTypes value
     switch(diagramType.value){
       case "balkendiag" :
          alert("Balkendigramm!");
       break;
       //...
     }
  };
 };

Try it out!

PS：您无法访问变量通常意味着您应该重新构建代码......

Javascript，如果Else语句使用按钮和列表

3 个答案: