Question

现在我有一个表单，您可以在其中输入并提交年龄，单击该按钮时会出现一些文本。现在有两种不同的文本，一种是18岁以下的文本，另一种是18岁以上的文本。

我想要的是输入0-17、18-25、26-30等文本。但是我该怎么做？

基本上是一种表格，无论是否吸烟，您都会获得不同的输出结果。

<input id="age" value="18" class="text-center" />
<button onclick="myFunction()" type="button"> trigger </button>    

<h1 id="dontsmoke"></h1>

<script>
    function myFunction() {
        var age, smokeable;
        age = document.getElementById("age").value;
        smokeable = (age < 18) ? "Don't smoke" : "Still, don't smoke";
        document.getElementById("dontsmoke").innerHTML = smokeable + "...";
    }
</script>

Answer 1

只需像这样链接您的三元运算符：

function myFunction() {
    var age, smokeable;
    age = document.getElementById("age").value;
    smokeable = (age < 18) ? "A" : (age > 17 && age < 26) ? "B" : (age >25 && age < 31) ? "C" : "Outside of age range";
}

jsFiddle 和三元运算符方法：http://jsfiddle.net/AndrewL64/3jys6fah/4/

或者您可以使用标准的if/else语句方法：

function myFunction() {
    var age, smokeable;
    age = document.getElementById("age").value;

    if(age < 18) {
        smokeable = "A";
    }
    else if(age > 17 && age < 26) {
        smokeable = "B";
    }
    else if(age > 25 && age < 31) {
        smokeable = "C";
    }
    else {
        smokeable = "Outside of age range";
    }
}

jsFiddle 和标准的 if/else语句方法：http://jsfiddle.net/AndrewL64/3jys6fah/7/

或者您可以使用switch语句方法，如下所示：

var age = document.getElementById("age").value;
switch (true) {
    case (age < 18):
        smokeable = "A";
        break;
    case (age < 26):
        smokeable = "B";
        break;
    case (age < 31):
        smokeable = "C";
        break;
    default:
        smokeable = "Outside of age range";
    }

jsFiddle 和 switch语句方法：http://jsfiddle.net/AndrewL64/3jys6fah/14/

Answer 2

基本上，使用普通的if-else块，出于提高可读性的目的，我建议采用这种方式，而不是使用多个三元运算符

if (age <= 17) { 
   smokeable = "Don't smoke"; 
} else if (age >= 18 && age <=25) { 
   smokeable = "Still, don't smoke"
} else if (age >= 26 && age <=30) {
   smokeable = "Still don't smoke, but you are old enough to decide for yourself";
} else {
   smokeable = "Do whatever you want";
}

按照@ nawed-khan的建议，您还可以使用switch语句

switch (true) {
    case (age < 18):
        smokeable = "Don't smoke";
        break;
    case (age < 26):
        smokeable = "Still, don't smoke"
        break;
    case (age < 30):
        smokeable = "Still don't smoke, but you are old enough to decide for yourself";
        break;
    default:
        smokeable = "Do whatever you want";
        break;
}

Answer 3

使用 switch语句（而不是多个if / else或三元方程），该语句允许一系列条件和条件匹配的结果操作。

请注意在switch语句中使用（true）-这意味着当陈述的条件== true时，执行该操作。

function myFunction() {
    var age, smokeable;
    age = parseInt(document.getElementById("age").value);
    switch(true) {
    case age > 17 && age <= 25:
      smokeable = "Still too young to smoke";
      break;
     case age > 25 && age <=30:
      smokeable = "Smoke 'em if you got 'em";
      break;
    default:
      smokeable = "Don't smoke";
  }

   document.getElementById("dontsmoke").innerHTML = smokeable + "...";
}

<input id="age" value="18" class="text-center" />
<button onclick="myFunction()" type="button"> trigger </button>
<h1 id="dontsmoke"></h1>

如何添加多个语句

3 个答案: