Question

我创建了checkDay函数来获取输入类型文本字段的值，并使用if / else条件检查值，并通过innerHTML将欲望输出到目标div #id。

问题是我想避免所有时间写“document.getElementById（”showDay“）。innerHTML”。有没有办法编写简单的代码，它会执行相同的结果？

工作代码 - http://jsfiddle.net/animatorstar/5chokg76/4/

function checkDay()
{
    
    var a = document.getElementById("enterNumber").value;  
    
    if (a==0)  //condition
    {
        alert("value of a is "+a);  //statements
        document.getElementById("showDay").innerHTML = "Enter value between 1-7";
    }
    
    if (a==1)  //condition
    {
        alert("value of a is "+a);  //statements
        document.getElementById("showDay").innerHTML = "Entered value is " + a + ", " + "Day is Monday";
    }
    
    else if (a==2)  //condition
    {
        alert("value of a is "+a);  //statements
        document.getElementById("showDay").innerHTML = "Entered value is " + a + ", " + "Day is Tuesday";
    }
    
    else if (a==3)  //condition
    {
        alert("value of a is "+a);  //statements
        document.getElementById("showDay").innerHTML = "Entered value is " + a + ", " + "Day is Wendesday";
    }
    
    else if (a==4)  //condition
    {
        alert("value of a is "+a);  //statements
        document.getElementById("showDay").innerHTML = "Entered value is " + a + ", " + "Day is Thursday";
    }
    
    else if (a==5)  //condition
    {
        alert("value of a is "+a);  //statements
        document.getElementById("showDay").innerHTML = "Entered value is " + a + ", " + "Day is Friday";
    }
    
    else if (a==6)  //condition
    {
        alert("value of a is "+a);  //statements
        document.getElementById("showDay").innerHTML = "Entered value is " + a + ", " + "Day is Saturday";
    }
    
    else if (a==7)  //condition
    {
        alert("value of a is "+a);  //statements
        document.getElementById("showDay").innerHTML = "Entered value is " + a + ", " + "Day is Sunday";
    }
    
    else
    {
        alert("Wrong value - Enter value between 1-7");  //statements
    }
    
}

<input type="text" id="enterNumber" name="" placeholder="Enter number for check value" />

<button onClick="checkDay();"> Check Value </button>

<br>
<div id="showDay"> </div>

Answer 1

使用类似的东西

function checkDay()
{
    var a = document.getElementById("enterNumber").value;  

    var days = ["Mon", "Tue", "Wed","Thur", "Fri","Sat","Sun"];
    if (a > 0 and a < 8) {
        document.getElementById("showDay").innerHTML = 
           "Entered value is " + a + ", " + "Day is "+ days[a-1];
    } else
    {
        alert("Wrong value - Enter value between 1-7");  //statements
    }
}

Answer 2

您可以使用数组存储日期。

var days = new Array("mon","tue","wed","thur","fri","sat","sn");

然后，只需使用，

if(a>=1 && a<=7)
    document.getElementById("showDay").innerHTML = "Entered value is " + a + ", " + "Day is "+ days[a-1];
else
    alert("Wrong value - Enter value between 1-7");

Answer 3

我对此的看法是使用两个简单的函数;第一个是反复减少document.getElementById()的输入，尽管省略了多个if测试可以避免这种优势。第二个只使用index-1语法从数组中返回一天，因为您使用的是1-7而JavaScript使用的是从零开始的索引：

function gid(id) {
  return document.getElementById(id);
}

function dayFromInt(n) {
  return ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'][n - 1];
}

function checkDay() {

  var a = document.getElementById("enterNumber").value;
  if (a > 0 && a < 8) {
    gid('showDay').textContent = 'Entered value is: ' + a + '; Day is: ' + dayFromInt(a);
  } else {
    gid('showDay').textContent = 'Pick a day, by number, from 1-7';
  }

}

<input type="text" id="enterNumber" name="" placeholder="Enter number for check value" />

<button onClick="checkDay();">Check Value</button>

<br>
<div id="showDay"></div>

innerHTML - 如何在javascript中为div id赋值和显示

3 个答案: