如何在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>

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

此处显示的 JS 代码上方是 118 个对象和一些变量，对问题没有任何重要意义。

我想要实现的是接收userAnswer ，然后从中找到链接到 JS 对象的某些指定关键字，并根据这些关键字将outputText “遇到不可思议的维度的生物...”更改为我选择的适当响应，在这种情况下“是”。

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

ReferenceError：未定义输出（ https://run.scrimba.com/static/cdPLKJh8/-1/index.html:1 ）

编辑： 1. 感谢 Masoud Keshavarz 编辑这篇文章，并使其格式不那么混乱。

2. 澄清一下，HTML 代码和 JS 代码是外部文件，它们是完全分开的。

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

4. 最后，我发现在 now-Approved 评论编辑我的代码后，它停止显示错误，但是当我将开关的 case 1 中的数字 1 更改为字符串而不是普通数字（在它周围添加引号）时，它确实有效. 这仍然很奇怪，我不明白为什么我只能使用字符串而不是数字，但它有效。

这个解决方案唯一的问题是它没有解决 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

三个问题：

1. 你得到了错误元素的值。 您要查找的text位于text元素（一个 textarea）中，而不是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>