如何在HTML和JS文件之间建立two-way连接？

Question

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

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

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

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

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>

显然，在此示例中，我只是想将文本更改为是。

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

我想要实现的是接收userAnswer，并从中找到link到JS objects的某些指定关键字，并根据这些关键字更改outputText "A creature of inconceivable dimensions encountered..." 到我选择的适当响应，在本例中为 "Yes".

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

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

编辑： 1. 感谢 Masoud Keshavarz 编辑此 post，并使其格式不那么混乱。

澄清一下，HTML代码和JS代码是外部文件，它们是完全分开的。
我确实用 "text" 替换了 "userAnswer" 引用，因为我最初错误地引用了按钮而不是输入的文本。
最后我发现在 now-Approved 评论编辑了我的代码后它不再显示错误，但是当我将开关的情况 1 中的数字 1 更改为 a字符串而不是普通数字（在其周围添加引号）。这仍然很奇怪，我不明白为什么我只能使用字符串而不是数字，但它有效。

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

Answer 1

我把你的js代码改了一点像这样

function output() {
let 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;
}

并且在你的 html 我更改了 onclick 以调用不带参数的函数

<input id="userAnswer" type="button" value="Proceed" onclick="output()">

Answer 2

三期：

您获取了错误元素的值。您要查找的文本位于 text 元素中，它是一个文本区域，而不是 userAnswer 元素中，它是一个按钮。
您在错误的时间获取元素的值 - 在脚本加载时，而不是在用户单击按钮时。加载脚本时，text 元素的值为空。要解决此问题，请在函数内移动 var userAnswer... 行。
如果您使用 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>

如何在HTML和JS文件之间建立two-way连接？

How to establish two-way connection between HTML and JS files?

javascript

html

text-based