使用getElementById表达式切换语句

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用getElementById表达式切换语句相关的知识,希望对你有一定的参考价值。

是否可以使用方法“getElementByName”的表达式创建“Switch”语句,以检查复选框是否具有相同的名称?

这是我的功能:

function finalOutput() {
var text, text2, q = document.getElementByName("checker").value;

switch(q){
    case 1:
        text = "my role is role1";
    break;
    case 2:
        text = "my role is role2";
    break;
    case 3:
        text = "my role is role3";
    break;
    case 4:
        text2 = "my parameter is parameter1";
    break;
    case 5:
        text2 = "my parameter is parameter2";
    break;
    case 6:
        text2 = "my parameter is parameter3";
    break;
    default:
    text = "Please check if you fill all details...";
    }
document.getElementById("output").innerhtml = text;
document.getElementById("output2").innerHTML = text2;
}

这是html中的复选框:

role1:  <input type="checkbox" id="1" onclick="selectOnlyThis(this.id)" 
value="1" name="checker"/> </br>
role2:  <input type="checkbox" id="2" onclick="selectOnlyThis(this.id)"         
value="2" name="checker"/> </br>
role3:  <input type="checkbox" id="3" onclick="selectOnlyThis(this.id)"     
value="3" name="checker"/> </br>
parameter1:  <input type="checkbox" id="4" 
onclick="selectOnlyThis2(this.id)" value="4" name="checker" /> </br>
parameter2:  <input type="checkbox" id="5" 
onclick="selectOnlyThis2(this.id)" value="5" name="checker" /> </br>
parameter3:  <input type="checkbox" id="6" 
onclick="selectOnlyThis2(this.id)" value="6" name="checker" />

我希望交换机能够获得每个复选框的值,并且它会执行我告诉他的相应信息。我认为问题在于切换的情况但不确定。我尝试用“if”来做,但无法使它工作。

答案

也许是这样的?

如果你打开q,你需要测试“1”等,如果你想要q === 1你需要+ q来转换为数字

function selectOnlyThis(q) {
  var text = "Please check if you fill all details...",
     text2 = "";
     console.log(q)
  switch (+q) {
    case 1:
      text = "my role is role1";
      break;
    case 2:
      text = "my role is role2";
      break;
    case 3:
      text = "my role is role3";
      break;
    case 4:
      text2 = "my parameter is parameter1";
      break;
    case 5:
      text2 = "my parameter is parameter2";
      break;
    case 6:
      text2 = "my parameter is parameter3";
      break;
  }
  document.getElementById("output").innerHTML = text;
  document.getElementById("output2").innerHTML = text2;
}
role1:      <input type="checkbox" id="1" onclick="selectOnlyThis(this.id)" value="1" name="checker" /> </br>
role2:      <input type="checkbox" id="2" onclick="selectOnlyThis(this.id)" value="2" name="checker" /> </br>
role3:      <input type="checkbox" id="3" onclick="selectOnlyThis(this.id)" value="3" name="checker" /> </br>
parameter1: <input type="checkbox" id="4" onclick="selectOnlyThis(this.id)" value="4" name="checker" /> </br>
parameter2: <input type="checkbox" id="5" onclick="selectOnlyThis(this.id)" value="5" name="checker" /> </br>
parameter3: <input type="checkbox" id="6" onclick="selectOnlyThis(this.id)" value="6" name="checker" />
<span  id="output"></span>
<span  id="output2"></span>
另一答案

首先,你必须更正函数名称document.getElementsByName(“q”);您的代码中缺少“s”。 其次,如果您有3个或N个具有相同名称的元素,则对象“document”将为您返回一个包含3或N个对象的列表,例如:

<div class="ps-relative">
    <input name="q" type="text" value="test" />
    <input name="q" type="text" value="Hello world" />
</div>

var myElements = document.getElementsByName("q");

myElements[0] // has the input element including his value 'test'
alert(myElements[0].value);

myElements[1] // has the input element including his value 'Hello world'
alert(myElements[1].value);

注意。要传递所有元素,你必须使用'for looping','while looping'或递归迭代。如果元素数量已修复,则可以使用“索引”位置。我不建议这样做,因为这不是一个好习惯。

以上是关于使用getElementById表达式切换语句的主要内容,如果未能解决你的问题,请参考以下文章

lambda 表达式中的 C# 切换

switch语句 switch语句的相关知识

js 宽窄屏切换效果优化感悟

JavaScript-学习一

Javascript:document.getElementById.innerHTML 中的 if-else 语句不起作用

switch case的用法