根据下拉菜单创建开关

时间:2015-04-08 23:59:29

标签: javascript html

我正在尝试创建一个普通的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。

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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

从函数

中访问全局var
var curFeel;

function changeFeeling(){

    curFeel = event.target.value;

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

        }
    }
}

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

答案 2 :(得分:0)

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

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元素中,例如(只需要一次更改而不是一打)

希望这有帮助。