为什么以下按钮切换案例javascript无效?

时间:2014-03-26 21:42:37

标签: javascript jquery html ibm-mobilefirst

我正在使用以下代码来获取按钮用户的值,然后在标签中单击并打印相同的内容。我已经在Worklight项目中创建了这个代码,当我运行项目时,我定义的其他函数似乎都没有用。但是当我把这个功能放在评论中时,一切似乎都很好。

我也试过直接将按钮的ID直接放到开关盒上,但这也不起作用。我是javascript概念的新手,无法找到解决方案。如果有帮助的话,在javascripts下面提供了必要的html。

function typecheck(objButton) {
  exptype = document.getElementById("exptype");
  grocery = document.getElementById("button");
  medical = document.getElementById("button2");
  education = document.getElementById("button3");
  entertainment = document.getElementById("button4");
  automobile = document.getElementById("button5");
  insurance = document.getElementById("button6");
  others = document.getElementById("button7");
  switch (objButton)
case "grocery":
  exptype.innerHTML = "grocery";
  break;
case "medical":
  exptype.innerHTML = "medical";
  break;
case "education":
  exptype.innerHTML = "education";
  break;
case "entertainment":
  exptype.innerHTML = "entertainment";
  break;
case "automobile":
  exptype.innerHTML = "automobile";
  break;
case "insurance":
  exptype.innerHTML = "insurance";
  break;
default:
  exptype.innerHTML = "others";
  break;
}

html代码:

<div data-role="collapsible" id="collapsible2">
  <h3>Category</h3>  
    <div data-role="controlgroup" id="controlgroup1">
      <a href="#" data-role="button" id="button" onclick="typecheck(this)">Grocery</a>
      <a href="#"   data-role="button" id="button2" onclick="typecheck(this)">Medical</a>
      <a href="#"   data-role="button" id="button3" onclick="typecheck(this)">Education</a>
      <a href="#"   data-role="button" id="button4" onclick="typecheck(this)">Entertainment</a>
      <a href="#"   data-role="button" id="button5" onclick="typecheck(this)">Automobile</a>
      <a href="#"   data-role="button" id="button6" onclick="typecheck(this)">Insurance</a>
      <a href="#"   data-role="button" id="button7" onclick="typecheck(this)">Others</a>
    </div>              
  <label id="exptype">Label:</label>

3 个答案:

答案 0 :(得分:2)

试试这个(记住区分大小写):

function typecheck(objButton)
{
switch(objButton.innerHTML){
case "Grocery": exptype.innerHTML= "grocery";
                break;
case "Medical": exptype.innerHTML= "medical";
                break;
case "Education": exptype.innerHTML= "education";
                break;
case "Entertainment": exptype.innerHTML= "entertainment";
                break;
case "Automobile": exptype.innerHTML= "automobile";
                break;
case "Insurance": exptype.innerHTML= "insurance";
                break;
default:  exptype.innerHTML= "others";
                break;     
}                                         
}

答案 1 :(得分:0)

我相信你的问题在于你在this中传入typecheck(this)。你的switch case是针对DOM对象检查字符串。相反,我会传递this.innerHTML,如typecheck(this.innerHTML)

答案 2 :(得分:0)

你有几个问题,但具体来说你需要测试文本,innerHTML或innerText,而不是对象。此外,Javascript区分大小写。这个小提琴对我有用:http://jsfiddle.net/5VJ2H/

function typecheck(objButton) {
    exptype = document.getElementById("exptype");
    grocery = document.getElementById("button");
    medical = document.getElementById("button2");
    education = document.getElementById("button3");
    entertainment = document.getElementById("button4");
    automobile = document.getElementById("button5");
    insurance = document.getElementById("button6");
    others = document.getElementById("button7");

    switch (objButton.innerHTML.toLowerCase()){
    case "grocery":
      exptype.innerHTML = "grocery";
      break;
    case "medical":
      exptype.innerHTML = "medical";
      break;
    case "education":
      exptype.innerHTML = "education";
      break;
    case "entertainment":
      exptype.innerHTML = "entertainment";
      break;
    case "automobile":
      exptype.innerHTML = "automobile";
      break;
    case "insurance":
      exptype.innerHTML = "insurance";
      break;
    default:
      exptype.innerHTML = "others";
      break;
    }
}