Question

在我的网站＆＃34;我有一系列谜语，一旦你点击它们就会显示出答案。在外部javascript表格中，我有十个单独的函数，如下所示：

function myQuestion1() {document.getElementById("answer1").innerHTML = "When it's turned into the teacher";}

我想弄清楚如何使用多功能。我已经对此功能进行了测试。在HTML中，我这样编写：

<p onClick="revealAnswer('answer11','When it is turned into the teacher')">When is homework not homework?</p>

在我的外部JavaScript工作表中，我将其编写为：

function revealAnswer(answerId, answer){document.getElementById("answerId").innerHTML = "answer";}

我有什么遗失的吗？

Answer 1

不引用你的变量，否则它们被解释为字符串：

var x = "Hello there!";
console.log(x); //"Hello there!"
console.log("x"); //"x"

所以，对于你的代码：

function revealAnswer(answerId, answer) {
    document.getElementById(answerId).innerHTML = answer;
}

Answer 2

function revealAnswer(answerId, answer){
document.getElementById(answerId).innerHTML = answer;
}

Answer 3

除了其他人提到的引号错误之外，您还可以通过使用CSS隐藏元素来简化工作。如果你正在学习JS，这可能会有点提高，但它会使你的html更轻松。

CSS

.answer { visibility: hidden; };

HTML

<p onclick="revealAnswer(event)">
    Why was 6 affraid of 7?
    <span class="answer">
        Because 7 ate 9!
    </span>
</p>

JS

function revealAnswer(e) {
    e.target.querySelector(".answer").style.visibility = "visible";
}