如何在HTML和JS文件之间建立two-way连接?
How to establish two-way connection between HTML and JS files?
我正在制作我的第一个 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 之间的连接问题,而是它
将它们合二为一。我真的很想把它们分开或者
至少弄清楚这是否可能?
我把你的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()">
三期:
您获取了错误元素的值。您要查找的文本位于 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>
我正在制作我的第一个 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 之间的连接问题,而是它 将它们合二为一。我真的很想把它们分开或者 至少弄清楚这是否可能?
我把你的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()">
三期:
您获取了错误元素的值。您要查找的文本位于
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>