Question

所以我在html中有一个表单，每个选项都是这样的:(可以找到这样的大量完整页面here）

<input id="Q1opc1" name="Q1" type="radio" value="Q1opc1" /> 
    <label for="Q1opc1 ">Froyo </label> 

    <label id="Q1extr" style="display: none">&nbsp&nbsp Recuerda que los nombres se asignan en orden alfabético.
</label>  </br>

提交按钮：

    <input
        onclick="comprobarRespuesta(Q1opc2,Q1,Q1extr,Q1FraseCorrecto,Q1FraseIncorrecto,Q1GrCorrecto,Q1GrIncorrecto);"
        type="button" value="Comprobar" />

首先我传递正确的答案，然后是单选按钮的名称，然后是提示的ID，然后是正确和错误的短语和图像的ID，以显示/隐藏为适当的。

JavaScript函数如下所示：

function comprobarRespuesta(correcta, radio, extra, sicorrecto, sinocorrecto,
            iconoTick, iconoWrong) {
        var tmpChoice = radio;
        var c = radio.length;
        var correct = 0;
        for (i = 0; i < c; i++) {
            if (tmpChoice[i].checked == true) {
                extra[i].style.display = "inline";
                if (tmpChoice[i].value == correcta.value) {
                    sicorrecto.style.display = "inline";
                    sinocorrecto.style.display = "none";
                    iconoWrong.style.visibility = "hidden";
                    iconoTick.style.visibility = "visible";
                } else {
                    sinocorrecto.style.display = "inline";
                    sicorrecto.style.display = "none";
                    iconoWrong.style.visibility = "visible";
                    iconoTick.style.visibility = "hidden";  
                }
            } else {
                extra[i].style.display = "none";
            }
        }
    };

我遇到的问题是，在我能够测试的大多数浏览器中，我的函数中名为“extra”的变量是一个元素数组，因此访问extra [i]没有问题，但在firefox中，extra是只有第一个带有该ID的标签，而不是全部，所以JavaScript输出“TypeError：extra [i]未定义”到控制台，退出，并且我的表单表现得完全不起作用

Answer 1

因此，使用CBroe的指针，我重写了部分代码，以便它使用正确的document.getElementById（）/ document.getElementsByName（），并重新执行重复ID。现在它需要传递更少的参数，并且在我尝试的所有浏览器上都能正常工作，并且应该在所有其他浏览器上正常工作，因为我正在使用正确的函数。这是我的工作代码，现在是更少的部分（HTML）：

<form  name="Q4Form">
    <h5>
Cada ítem de menú tiene una serie de atributos. ¿Cuál de los siguientes NO es un atributo de menú?


        <img id="Q4GrCorrecto"  height="16" alt="Correcto"  style="visibility: hidden" width="16"
            src="http://www.dcomg.upv.es/~jtomas/bien.jpg" /> 
        <img id="Q4GrIncorrecto" height="16" alt="Incorrecto" style="visibility: hidden" width="16" 
            src="http://www.dcomg.upv.es/~jtomas/mal.png"/>
    </h5><h6>
    <input id="Q4opc1" name="Q4" type="radio" value="Q4opc1" /> 
    <label for="Q4opc1 ">icono
</label> 

    <label id="Q4extr1" name="Q4extr" style="display: none">&nbsp&nbsp</label>  </br> 
    <input id="Q4opc2" name="Q4" type="radio" value="Q4opc2" /> 
    <label for="Q4opc2 ">método que se ejecutará al seleccionar una opción
</label> 

    <label id="Q4extr2" name="Q4extr" style="display: none">&nbsp&nbsp</label>  </br> 
    <input id="Q4opc3" name="Q4" type="radio" value="Q4opc3" /> 
    <label for="Q4opc3 ">título que se mostrará
</label> 

    <label id="Q4extr3" name="Q4extr" style="display: none">&nbsp&nbsp</label>  </br> 
    <input id="Q4opc4" name="Q4" type="radio" value="Q4opc4" /> 
    <label for="Q4opc4 ">identificador (id)</label> 

    <label id="Q4extr4" name="Q4extr" style="display: none">&nbsp&nbsp</label>  </br> 

            </h6>   
    <label id="Q4FraseCorrecto" style="display: none">
        Respuesta correcta
    </label>
    <label id="Q4FraseIncorrecto" style="display: none">
        Respuesta incorrecta
    </label> </br> 

    <input
        onclick="comprobarRespuesta(2,4);"
        type="button" value="Comprobar" />
</form>

onClick变量是正确答案和问题编号

JavaScript的：

function comprobarRespuesta(numCorrecta, numPregunta) {
        var radio = document.getElementsByName("Q"+numPregunta);
        var sicorrecto = document.getElementById("Q"+numPregunta+"FraseCorrecto");
        var sinocorrecto = document.getElementById("Q"+numPregunta+"FraseIncorrecto");
        var iconoTick = document.getElementById("Q"+numPregunta+"GrCorrecto");
        var iconoWrong = document.getElementById("Q"+numPregunta+"GrIncorrecto");
        var extra = document.getElementsByName("Q"+numPregunta+"extr");
        var c = radio.length;
        for (i = 0; i < c; i++) {
            if (radio[i].checked == true) {
                extra[i].style.display = "inline";
                if (i == numCorrecta-1) {
                    sicorrecto.style.display = "inline";
                    sinocorrecto.style.display = "none";
                    iconoWrong.style.visibility = "hidden";
                    iconoTick.style.visibility = "visible";
                } else {
                    sinocorrecto.style.display = "inline";
                    sicorrecto.style.display = "none";
                    iconoWrong.style.visibility = "visible";
                    iconoTick.style.visibility = "hidden";  
                }
            } else {
                extra[i].style.display = "none";
            }
        }
    };

现在我正在调整函数内部的变量，并且输入的次数要少得多，因为元素的名称或ID是可以预测的。

Javascript在Firefox上获得单个元素，在其他浏览器上获取数组

1 个答案: