Question

<script>
document.getElementById("clicker").onclick = function () {
    var scenario = document.getElementById('scenario');
    switch (scenario) {
        case 1:
            document.getElementById("answer").innerHTML = "How are you?";
            break;
        case 2:
            document.getElementById("answer").innerHTML = "whatevers";
            break;
        case 3:
            document.getElementById("answer").innerHTML = "i don't know";
            break;
        case 4:
            document.getElementById("answer").innerHTML = "today is your lucky day";
            break;
        default:
            document.getElementById("answer").innerHTML = "This is the worst case scenario";
    }
}
</script>

<input type="text" id="scenario" />
<input type="submit" id="clicker" />
<p id="answer"></p>

所以在这里，我试图基本上有一个文本字段，用户将输入一些值然后，脚本将根据该值查看案例并确定在paragraph元素中输出的内容。

请告知我应该如何更正此代码。

Answer 1

我会建议：

<script>

document.getElementById("clicker").onclick = function() {
    var scenario = document.getElementById('scenario').value; 
    var answers = {
        "1": "How are you?",
        "2": "whatevers",
        "3": "i don't know",
        "4": "today is your lucky day",
        "5": "This is the worse case scenario"
    };
    var str = answers[scenario];
    if (str) {
        document.getElementById("answer").innerHTML = str;
    }
}

</script>

主要修复方法是从<input>字段获取.value属性的值。

更改的其余部分是将类型化字符串映射到问题的更有效方法。

如果你的场景总是简单的序列号，那么你也可以使用数组查找：

<script>

document.getElementById("clicker").onclick = function() {
    var scenario = document.getElementById('scenario').value; 
    var answers = [
        "How are you?",
        "whatevers",
        "i don't know",
        "today is your lucky day",
        "This is the worse case scenario"
    ];
    if (scenario) {
        var str = answers[+scenario - 1];
        if (str) {
            document.getElementById("answer").innerHTML = str;
        }
}

</script>

通常，如果您可以找到将switch语句表达为数组查找或对象查找的方法，那么最终将使用更清晰，更小且更易于维护的代码。

Answer 2

尝试使用，您需要添加value属性。

var scenario = document.getElementById('scenario').value;

而不是

var scenario = document.getElementById('scenario');

Answer 3

jfriend00对密钥查找方法进行了批准。我也包括我的答案，因为我还有一些额外的建议。 Live demo here (click).

/* try to avoid getting your element references inside of functions.
 * If you get them earlier, you don't need to keep searching the dom on each function call 
 */    
var input = document.getElementById('scenario');
var p = document.getElementById('answer');

var responses = [
  "How are you?",
  "whatevers",
  "i don't know",
  "today is your lucky day",
  "This is the worst case scenario"
];

/* I recommend using keyup rather than having to click on a button - save your user some work! */
input.addEventListener('keyup', function() {
  var response;
  if (responses[this.value]) {
    response = responses[this.value];
  }
  else { //do something if you don't have a response
    response = 'No response for this.';
  }
  p.textContent = response;
});

Answer 4

//尝试我的回答，希望你会有更好的经历

＆＃13;

function inputCSS() {
  var text;
  var inputValue = document.getElementById("demo").value;
  if (inputValue < 10) {
   alert ("you can't input a value lower than 10");
  }
  else if (inputValue > 100) {
    alert ("you can't input a value bigger than 100");
  }
}
function awal() {
  var sampleText ;
  var checkInputValue = document.getElementById("demo").value;
  var kopa = Number(checkInputValue);
  if (kopa === 61) {
    sampleText = "hurrah! you have won the lottery";
  }
  else if (kopa > 51 && kopa < 71) {
    sampleText = "too close";
  }
  else {
    sampleText = "bad luck!";
  }
  document.getElementById("sample").innerHTML = sampleText;
}

＆＃13;

#demo:invalid {
  border-color:  red;
}
input {
  width: 200px;
}

＆＃13;

<input type="number" id="demo" min="10" max="100" value="50"/>
<button onclick="awal()" onmouseover="inputCSS()">submit</button>
<p id="sample"></p>

＆＃13;

带有输入文本的Javascript switch语句

4 个答案: