javascript - 这个脚本是否遵循通用标准？（使用Javascript / HTML） - Thinbug

这个脚本是否遵循通用标准？（使用Javascript / HTML）

时间：2011-04-12 18:37:44

标签： javascript html protocols

我刚刚在这里制作了一个简单的Javascript Quiz脚本：

/* Dade Lamkins.  2011. */

var Questions = [
    { Question: "What is 5+2?", Values: ["7", "9", "10", "6"], Answer: 1 },
    { Question: "What is the square root of 16?", Values: ["7", "5", "4", "1"], Answer: 3 },
    { Question: "What is the answer to life?", Values: ["7", "42", "4", "47"], Answer: 2 }
];

var currentSession={ Questions: [], TotalPoints: 0 }

var Letters = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];

function createQuestions(id) {
    var tReturn="<form style=\"text-align: left;width: 33.33333%;background-color: lightblue;border=1px solid #000000;padding: 10px\">";
    tReturn=tReturn+"<b>Questions "+(id+1)+":</b><br />&nbsp;&nbsp;&nbsp;&nbsp;<i>"+Questions[id].Question+"</i><br /><br />";
    for (var i=0;i<(Questions[id].Values).length;i++) {
        tReturn=tReturn+"<input onClick=\"checkAnswer("+id+","+i+",this)\" type=\"button\" value=\""+Letters[i]+"\" style=\"width:50px\" />. "+Questions[id].Values[i]+"<br />";
    }
    tReturn=tReturn+"</form>";
    return tReturn;
}

function updateScore() {
    var currentPoints=0;
    for (var i=0;i<currentSession.Questions.length;i++) {
        currentPoints+=currentSession.Questions[i].Score;
    }
    document.getElementById('quiz_score').innerHTML='%'+Math.round((currentPoints/currentSession.TotalPoints)*100);
}

function initializeQuiz() {
    for (var i=0;i<Questions.length;i++) {
        var elem=document.getElementById('quiz_section');
        currentSession.TotalPoints+=parseInt(elem.getAttribute('chances'));
        elem.innerHTML=elem.innerHTML+createQuestions(i)+"<br />";
        currentSession.Questions[i]={ Chances: elem.getAttribute('chances'), Answered: false, Score: parseInt(elem.getAttribute('chances')) };
    }
    updateScore();
}

function finalizeAnswer(bttn,c,questionId) {
    if (c) {
        bttn.parentNode.style.backgroundColor="lightgreen";
        bttn.parentNode.innerHTML="<b>QUESTION "+(questionId+1)+":</b> Correct!";
    } else {
        bttn.parentNode.style.backgroundColor="pink";
        bttn.parentNode.innerHTML="<b>QUESTION "+(questionId+1)+":</b> Wrong!";
    }
    updateScore();
}

function checkAnswer(questionId,answerId,bttn) {
    if (Questions[questionId].Answer==(answerId+1)) {
        finalizeAnswer(bttn,true,questionId);
        return 0;
    } else {
        bttn.setAttribute('value','x');
        bttn.setAttribute('disabled','true');
    }
    currentSession.Questions[questionId].Chances--;
    currentSession.Questions[questionId].Score--;
    if (currentSession.Questions[questionId].Chances<=0) {
        finalizeAnswer(bttn,false,questionId);
    } else {
        updateScore();
    }
}

然后你把这是另一个html页面：

<html>
    <head>
        <title>HTML QUIZ</title>
        <script language="javascript" src="Quiz.js"></script>
    </head>
    <body onload='javascript:initializeQuiz()' bgcolor="#CCFFFF">
        <b>Your Score Is Currently:  </b><span id="quiz_score"></span>
        <br />
        <br />
        <center><span style="width:100%" id="quiz_section" chances="1" quizid="1"></span></center>
    </body>
</html>

我的问题是，我在这里使用的所有方法都被普遍接受了吗？

1 个答案:

答案 0 :(得分：2)

使用innerHTML可能会让您获得JavaScript风格警察的访问，除了它看起来不错。在客户端上构建HTML的最安全和最健壮的方法是使用document.createElement https://developer.mozilla.org/en/DOM/document.createElement和Node.appendChild https://developer.mozilla.org/En/DOM/Node.appendChild制作DOM元素。