Question

我正在尝试创建一个普通的javascript开关，根据用户从下拉菜单中选择的内容给我一条提醒信息和图片

这是我到目前为止所拥有的

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<h1>How are you feeling?</h1>
<img id="feelimg" src="Images/questionSun.jpg" alt="question sun">
<select id="feeling" onChange="changeFeeling();">
  <option value="question">Question</option>
  <option value="happy">Happy</option>
  <option value="sad">Sad</option>
  <option value="cool">Cool</option>
  <option value="unsure">Unsure</option>
</select>

<script type="text/javascript">
  var curFeel = document.getElementById('feeling').value;

  function changeFeeling(){
      switch (curFeel) {
        case 'question':  {
          document.getElementById("feelimg").src = "Images/questionSun.jpg";
          alert("Please make a selection or go back to bed!");
          break;
        }
        case 'happy': {
          document.getElementById("feelimg").src = "Images/happySun.jpg";
          alert("I am glad you are happy");
          return curFeel;
          break;
        }
        case 'sad': {
          document.getElementById("feelimg").src = "Images/sadSun.jpg";
          alert("I am sorry you are sad");
          break;
        }
        case 'cool': {
          document.getElementById("feelimg").src = "Images/coolSun.jpg";
          alert("It's great you are feeling cool!");
          break;
        }
        case 'unsure': {
          document.getElementById("feelimg").src = "Images/unsureSun.jpg";
          alert("I hope you get past that soon!");
          break;
        }
      }
    }
</script>
</body>
</html>

无论我做什么，都会遇到案件问题。它需要是javascript。我不允许在这个特殊问题上使用jquery。

Answer 1

只需在你的函数中移动你的var声明。

你完成var的方式是在javascript被加载后填充值，将它移动到将在onChange事件中填充的函数，然后交换机工作正常。

<script type="text/javascript">

  var curFeel = document.getElementById('feeling').value;    

  function changeFeeling(){

      curFeel = document.getElementById('feeling').value;

      switch (curFeel) {
        case 'question':  {
          document.getElementById("feelimg").src = "Images/questionSun.jpg";
          alert("Please make a selection or go back to bed!");
          break;
        }
        case 'happy': {
          document.getElementById("feelimg").src = "Images/happySun.jpg";
          alert("I am glad you are happy");
          return curFeel;
          break;
        }
        case 'sad': {
          document.getElementById("feelimg").src = "Images/sadSun.jpg";
          alert("I am sorry you are sad");
          break;
        }
        case 'cool': {
          document.getElementById("feelimg").src = "Images/coolSun.jpg";
          alert("It's great you are feeling cool!");
          break;
        }
        case 'unsure': {
          document.getElementById("feelimg").src = "Images/unsureSun.jpg";
          alert("I hope you get past that soon!");
          break;
        }
      }
    }
</script>

我建议的另一种方法是不使用这个全局变量，只需使用onchange这样的参数：

<select id="feeling" onChange="changeFeeling(this);">
  <option value="question">Question</option>
  <option value="happy">Happy</option>
  <option value="sad">Sad</option>
  <option value="cool">Cool</option>
  <option value="unsure">Unsure</option>
</select>

<script type="text/javascript">



      function changeFeeling(curFeel){          


          switch (curFeel.value) {
            case 'question':  {
              document.getElementById("feelimg").src = "Images/questionSun.jpg";
              alert("Please make a selection or go back to bed!");
              break;
            }
            case 'happy': {
              document.getElementById("feelimg").src = "Images/happySun.jpg";
              alert("I am glad you are happy");
              return curFeel;
              break;
            }
            case 'sad': {
              document.getElementById("feelimg").src = "Images/sadSun.jpg";
              alert("I am sorry you are sad");
              break;
            }
            case 'cool': {
              document.getElementById("feelimg").src = "Images/coolSun.jpg";
              alert("It's great you are feeling cool!");
              break;
            }
            case 'unsure': {
              document.getElementById("feelimg").src = "Images/unsureSun.jpg";
              alert("I hope you get past that soon!");
              break;
            }
          }
        }
    </script>

Answer 2

让您的切换变量event.target.value，它将按您希望的方式工作。

从函数

中访问全局var

var curFeel;

function changeFeeling(){

    curFeel = event.target.value;

    switch (curFeel) {
        case 'question':  {
      ....

        }
    }
}

这样变量curFeel将是所选值全局的任何值。 Heres a Codepen

Answer 3

我认为迪戈加西亚已经提供了答案，但我想建议对代码进行一些简单的改进，以便你收集一些奖励积分（如果有的话）。

var curFeel; // Value is not being used before changeFeeling function call, so you only need declare it rather than assign a value

function changeFeeling(){

  var picture, message; // Declare variables to contain the decided upon image and alert message
  var pictureFiles = 'Images/'; // Where your image files are kept, so you don't repeat a dozen times below

  curFeel = document.getElementById('feeling').value;

  switch (curFeel) {
    case 'question':  {
      picture = "questionSun.jpg";
      message = "Please make a selection or go back to bed!";
      break;
    }
    case 'happy': {
      picture = "happySun.jpg";
      message = "I am glad you are happy";
      break;
    }
    case 'sad': {
      picture = "sadSun.jpg";
      message = "I am sorry you are sad";
      break;
    }
    case 'cool': {
      picture = "coolSun.jpg";
      message = "It's great you are feeling cool!";
      break;
    }
    case 'unsure': {
      picture = "unsureSun.jpg";
      message = "I hope you get past that soon!";
      break;
    }
  }

  // Set image and alert message!
  document.getElementById("feelimg").src(pictureFiles + picture);
  alert(message);
}

原因：

以上更容易阅读
如果图片元素的ID或图片文件的位置发生变化，您只需要在一个地方更改它而不是十几个
如果消息警报周围的行为发生变化，则相同，例如而不是使用alert（）函数，消息被插入到页面上的div元素中，例如（只需要一次更改而不是一打）

希望这有帮助。

根据下拉菜单创建开关

3 个答案: