javascript - 如何在HTML和JS文件之间建立双向连接？

Question

我正在制作我的第一个基于文本的交互式场景，我希望用户输入他们想要的任何内容，然后单击提交。只有标题、一些场景文本、一个键入空间和提交按钮，但是当我按下提交时，它总是给出错误 "output" is not specified .

我已经确定我可以通过 "getElementById" 在 JS 中使用来自 HTML 的函数，但这似乎并不适用于其他方式。 (我也在 Scrimba 中使用集成的浏览器仿真)。如果有人能告诉我他们使用的带有实时代码表示的好软件，那也将是巨大的帮助。

我试过移动 <script type="text/javascript" src="index.pack.js"></script>从头到 body ，再到 body 的末端，这并没有改变任何东西。

我还尝试更改 onclick并在JS中完成整个过程，然后通过刷新窗口显示新文本，但是点击没有任何反应，甚至根本没有错误，所以它可能是一个错误的代码。这就是为什么我更愿意对当前布局进行尽可能少的更改。

var userAnswer = document.getElementById("userAnswer").value;
function output(userAnswer) {
    var answer1 = "";
    switch(userAnswer) {
     case 1:
     case "What is its name?":
     case "Ask for name":
        answer1 = document.getElementById("outputText").innerHTML = "Yes"
        break;        
    }
    return answer1;
}

<h1>The Creature Trial</h1>
<p id="outputText"><em>A creature of inconceivable dimensions encountered...</em></p>
<textarea placeholder="What do you do..." id="text" rows="5" cols="25"></textarea>
<input id="userAnswer" type="button" value="Proceed" onclick="output(userAnswer)">
<script type="text/javascript" src="index.pack.js"></script>

很明显，在此示例中，我只是想将文本更改为"is"。

在此处显示的 JS 代码之上，是 118 个对象和一些变量，对问题而言无关紧要。

我想要实现的是接收 userAnswer ，然后从中找到链接到 JS 对象的某些指定关键字，并根据这些关键字更改 outputText “遇到了不可思议的尺寸的生物……”我选择了适当的回答，在这种情况下是"is"。

相反，当我点击时没有任何反应，我在控制台中收到此消息:

ReferenceError: output is not defined (https://run.scrimba.com/static/cdPLKJh8/-1/index.html:1)

编辑: 1. 感谢 Masoud Keshavarz 编辑了这篇文章，并使其格式不再困惑。

1. 澄清一下，HTML 代码和 JS 代码是外部文件，它们是完全独立的。

2. 我确实替换了 "userAnswer"引用“文本”，因为我最初错误地指的是按钮而不是输入的文本。

3. 最后我发现，在现在批准的评论编辑了我的代码后，它不再显示错误，但是当我将开关的情况 1 中的数字 1 更改为字符串而不是纯数字时，它确实起作用了(在其周围添加引号)。这仍然很奇怪，我不明白为什么我只能使用字符串而不是数字，但它有效。

这个解决方案的唯一问题是它没有解决 两个文件 HTML 和 JS 之间的连接问题，而是它 将它们合二为一。我真的很想把它们分开或者 至少弄清楚这是否可能？

Answer 1

三个问题:

1. 您获得了错误元素的值。您要查找的文本位于 text 元素中，它是一个文本区域，而不是 userAnswer 元素中，它是一个按钮。

2. 您在错误的时间获取元素的值 - 在脚本加载时，而不是在用户单击按钮时。加载脚本时，text 元素的值为空。要解决此问题，请在函数内移动 var userAnswer... 行。

3. 如果您使用 getElementById 获取值，则无需将 output 变量传递给函数。留在里面没有坏处，但没有必要。

结果如下:

function output() {
    var userAnswer = document.getElementById("text").value;
    var answer1 = "";
    switch(userAnswer) {
     case 1:
     case "What is its name?":
     case "Ask for name":
        answer1 = document.getElementById("outputText").innerHTML = "Yes"
        break;
     }
     return answer1;
}

<h1>The Creature Trial</h1>
<p id="outputText"><em>A creature of inconceivable dimensions encountered...</em></p>
<textarea placeholder="What do you do..." id="text" rows="5" cols="25"></textarea>
<input id="userAnswer" type="button" value="Proceed" onclick="output()">
<script type="text/javascript" src="index.pack.js"></script>