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

Question

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

我已经确定我可以通过"getElementById" 在 JS 中使用 HTML 中的函数，但是这似乎无法反过来。 （我也在 Scrimba 中使用集成的浏览器仿真）。如果有人能告诉我他们使用的一个很好的软件，他们使用实时表示的代码，那也会有很大的帮助。

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

我也尝试过更改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>

显然，在这个例子中，我只是想将文本更改为是。

在此处显示的 JS 代码之上，是 118 个对象和一些 var，对问题没有什么重要意义。

我想要实现的是接收userAnswer，并从中找到链接到JS对象的某些指定关键字，并根据这些关键字更改outputText“遇到不可思议的尺寸的生物...... " 对我选择的适当响应，在本例中为“是”。

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

ReferenceError: 输出未定义 (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>

Answer 2

我对你的 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()">