javascript - 字符串与标签文本 JavaScript 的比较

标签 javascript

我正在创建一个网站,我基本上需要查看字符串是否匹配,以便将结果标记为正确(绿色)或错误(红色)。

我遇到的问题是它总是变成红色,即使字符串相同,我也不知道哪里出错了。

这是代码

var checkedButton = getCheckedRadio(document.getElementsByName("answer"));
        var id = checkedButton.id;
        if(id=="answer1"){
            var answer1 = document.getElementById("answer1text");
            if(rightAnswer == answer1.innerHTML){
                    answer1.style.color = "#33FF00";
            } 
            else{
                    answer1.style.color = "red";
            }   

        }
        else if(id=="answer2"){...

我已经使用 alert() 检查了 rightAnsweranswer1.innerHTML ,它给出了相同的结果,但它在以下情况下不起作用:我尝试比较它们...也尝试使用 === 运算符,同样的事情...

HTML 代码编辑

<form>
            <div id="left">
                <div id="a1">
                    <input type="radio" name="answer" value="" checked id="answer1">
                    <label id="answer1text">Odgovor na prvo pitanje</label>
                </div>
                <div id="a2">
                    <input type="radio" name="answer" value="" id="answer2">
                    <label id="answer2text">Odgovor na prvo pitanje</label>
                </div>
            </div>
            <div id="right">
                <div id="a3">
                    <input type="radio" name="answer" value="" id="answer3">
                    <label id="answer3text">Odgovor na prvo pitanje</label>
                </div>
                <div id="a4">
                    <input type="radio" name="answer" value="" id="answer4">
                    <label id="answer4text">Odgovor na prvo pitanje</label>
                </div>
            </div>...

编辑 2 - 整个 Javascript

        <script language="javascript" type="text/javascript">
    var counter = 1;
    var split;
    var rightAnswer;
    function potvrdi(){
            counter = getCookie("counter");

            if(counter == "")counter = 1;

            var potvrdi = document.getElementById("gmedu").innerHTML;
            if(potvrdi == "Potvrdi"){
                checkAnswer();
                document.getElementById("gmedu").innerHTML = "Dalje";

            }
            else{
                alert(counter);
                setCookie("counter",(parseInt(counter)+1));
                doSplit();
                document.getElementById("gmedu").innerHTML = "Potvrdi";
                document.getElementById("answer1text").style.color = "black";
                document.getElementById("answer2text").style.color = "black";
                document.getElementById("answer3text").style.color = "black";
                document.getElementById("answer4text").style.color = "black";
            }

        return false;
    }
    function setCookie(cname, cvalue) {
        document.cookie = cname + "=" + cvalue + "; ";
    }
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1);
            if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
        }
        return "";
    }
    function doSplit(){
        var text = "1.\r\n"+...\\here is a huge string of text   
        split = text.split(/\b\d+\./);
        var split1 = split[counter].split(/\n\w+\)/);
        rightAnswer = split1[1];
        split1 = randomizeAnswers(split1);
        document.getElementById("question").innerHTML = split1[0];
        document.getElementById("answer1text").innerHTML = split1[1];
        document.getElementById("answer2text").innerHTML = split1[2];
        if(split1.length > 3){
            document.getElementById("answer3text").innerHTML = split1[3];
            document.getElementById("a3").style.visibility = "visible";
            }
        else
            document.getElementById("a3").style.visibility = "hidden";
        if(split1.length > 4){
            document.getElementById("answer4text").innerHTML = split1[4];
            document.getElementById("a4").style.visibility = "visible";
        }
        else
            document.getElementById("a4").style.visibility = "hidden";
}
    function randomizeAnswers(split1){
        var length = split1.length-1;
        var random = (parseInt(Math.random()*length))+1;
        var tmp = split1[1];
        split1[1] = split1[random];
        split1[random] = tmp;
        return split1;
    }
    function checkAnswer(){
        var checkedButton = getCheckedRadio(document.getElementsByName("answer"));
        var id = checkedButton.id;
        if(id=="answer1"){
            var answer1 = document.getElementById("answer1text");
            console.log(answer1.innerHTML) 
            console.log(rightAnswer)
            if(rightAnswer === document.getElementById("answer1text").value){
                    answer1.style.color = "#33FF00";
                    alert("TACNO!");
            } 
            else{
                    answer1.style.color = "red";
                    alert("NETACNO!");
            }   

        }
        else if(id=="answer2"){
            var answer2 = document.getElementById("answer2text");
            if(rightAnswer == (answer2.innerHTML)) 
                answer2.style.color = "#33FF00";
            else    
                answer2.style.color = "red";
        }
        else if(id=="answer3"){
            var answer3 = document.getElementById("answer3text");
            if(rightAnswer == (answer3.innerHTML)) 
                answer3.style.color = "#33FF00";
            else    
                answer3.style.color = "red";
        }
        else if(id=="answer4"){
            var answer4 = document.getElementById("answer4text");
            if(rightAnswer == (answer4.innerHTML)) 
                answer4.style.color = "#33FF00";
            else    
                answer4.style.color = "red";
        }
    }
    function getCheckedRadio(radio_group) {
        for (var i = 0; i < radio_group.length; i++) {
            var button = radio_group[i];
            if (button.checked) {
                return button;
            }
        }
        return undefined;
    }

</script>

最佳答案

据我所知,这两行有问题

var text = "1.\r\n"+...\\here is a huge string of text   
split = text.split(/\b\d+\./);

split[1] 中拆分后,不仅是文本,而且还以 \r\n 开头的文本,
但是! 在 html 中,串行间隔符号减少为一个,在您的情况下 innerHTML 将以 \n 开头,这就是为什么您比较 false .

我看到至少有两种方法可以解决这个问题

  1. 将拆分表达式更改为

    split = text.split(/\b\d+\.\r\n/);
    
  2. 在比较之前替换此符号

    rightAnswer.replace(/\r|\n/g,"") == answer1.innerHTML.replace(/\r|\n/g,"")
    

关于javascript - 字符串与标签文本 JavaScript 的比较,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34143491/

相关文章:

javascript - 使用以 '#' 字符开头的键读取 json 对象

javascript - 显示每个月的假期列表

javascript - 如何克服 WhatWG/W3C/Chrome version 33.0.1750.146 "regression bug"with &lt;input type ="number"/> fields

javascript - 使用 Chart.js 显示图表

javascript - 使用 Rangy 将键盘插入符号移动到元素的末尾

javascript - 通过ajax传递post变量

javascript - 如何使用 Jquery 显示 JSONArray 项目

javascript - 动态设置/更改事件处理程序是不好的做法吗?

javascript - 检查 'click' 事件上的 Ctrl/Shift/Alt 键

javascript - 使用 Javascript 查找页面中的位置