Javascript 未捕获的 ReferenceError：函数未在 HTMLButtonElement.onclick 中定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47483960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught ReferenceError: function is not defined at HTMLButtonElement.onclick
提问by RacketyGnome300
Below is the html for an index page I've been working on. I want to create a button with an onclick function to say "hello world". So I used the script at the bottom of the page, but the button triggers the error described.
下面是我一直在处理的索引页面的 html。我想创建一个带有 onclick 功能的按钮来说“你好世界”。所以我使用了页面底部的脚本，但是按钮触发了描述的错误。
The most confusing part of it all, the button was functioning just fine until I changed the name of the function. I've had trouble since, even when I changed the name of the function back to what it is now.
最令人困惑的部分是，按钮运行良好，直到我更改了该功能的名称。从那以后我就遇到了麻烦，即使我把函数的名字改回了现在的样子。
<body>
<h1>Play Color Trivia</h1>
<div id="message">
</div>
<button onclick="sayhello()">speak</button>
<button id="roll_button" onclick="color_roll()">Color Roll</button><br><br>
<div id="color_box">
<div id="score_box">
<ul id="list" style="list-style-type: none">
<%= erb :token %>
</ul>
</div>
</div><br><br>
<div id="button_box">
<form id="color_form" method="post" target="frame">
</form>
</div><br><br>
<div id="question_box">
</div>
<div id="results">
</div>
<script src="/script.js" type="text/javascript">
</script>
<script src="http://code.responsivevoice.org/responsivevoice.js">
function sayhello(){
responsiveVoice.speak("hello world");
}
</script>
<iframe id="frame" name="frame"></iframe>
Script.js file
Script.js 文件
var evaluate; var list; var bullet; var colorize; var count; var stop; var change; var box; var roll_button; var button; var button_2; var message; var text; var question; var button_box = document.getElementById("button_box");
function color_roll(){
roll_button = document.getElementById("roll_button")
roll_button.style.display = "none"
box = document.getElementById("color_box");
change = setInterval(color,250)
stop = (Math.floor(Math.random() * 18))+1
// stop = 7
count = 0
}
function color(){
var array = ["red","orange","yellow","green","blue","purple","red","orange","yellow","green","blue","purple","red","orange","yellow","green","blue","purple"]
box.style.backgroundColor = array[count];
count += 1;
if (count == stop){
colorize = array[count-1]
clearInterval(change);
create_buttons();
color_selection();
}
}
function color_selection(){
if (colorize == "orange"){
message = document.getElementById("message");
text = document.createTextNode("You rolled an " + colorize);
message.appendChild(text);
rolled_color();
}
else{
message = document.getElementById("message");
text = document.createTextNode("You rolled a " + colorize);
message.appendChild(text);
rolled_color();
}
}
function helper(){
remove();
color_roll();
}
function create_buttons(){
button = document.createElement("input");
button_2 = document.createElement("input");
button.type = "button";
button_2.type = "button";
button.value = "Choose Color";
button_2.value = "Roll Again";
button.setAttribute("onClick","display()")
button_2.setAttribute("onClick","helper()");
button_box = document.getElementById("button_box");
button_box.appendChild(button);
button_box.appendChild(button_2);
}
function remove(){
button_box = document.getElementById("button_box");
button_box.removeChild(button);
button_box.removeChild(button_2);
message.removeChild(text);
}
//Create JSON objects for trivia questions
// var object = JSON.parse('{"red":"Three trivia questions will appear here"}')
function display(){
remove();
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200) {
document.getElementById("question_box").innerHTML = this.responseText;
}
};
xhttp.open('GET','/question',true);
xhttp.send();
document.getElementById("question_box").style.display = "block"
}
function hello(){
console.log("hello world")
}
function display_result(){
// remove();
document.getElementById("submit").style.display = "none"
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200) {
document.getElementById("results").innerHTML = this.responseText;
}
};
xhttp.open('GET','/test',true);
xhttp.send();
}
function rolled_color(){
var input = document.createElement("input");
input.style.display = "none";
var submit = document.createElement("input");
submit.style.display = "none";
input.name = "rolled_color";
input.value = colorize;
submit.type = "submit";
var form = document.getElementById("color_form")
form.appendChild(input)
form.appendChild(submit)
document.forms['color_form'].submit();
// display();
}
function add_bullet(){
document.getElementById("test").style.display = "none"
document.getElementById("evaluate_button").style.display = "none"
document.getElementById("question_box").style.display = "none"
evaluate = document.getElementById("value_input").value
bullet = document.createElement("li")
canvas = document.createElement("canvas")
var ctx = canvas.getContext("2d")
list = document.getElementById("list")
// list.style.list-style-type: none
canvas.width = 50
canvas.height = 50
// canvas.style.border = "2px solid black"
canvas.style.backgroundColor = colorize
// canvas.appendChild(document.createTextNode("test"))
if (evaluate == "You're Correct!"){
bullet.appendChild(canvas);
list.appendChild(bullet);
}
color_roll();
}
回答by Channa
As described in this question
If a <script>has a src then the text content of the element will be not be executed as JS (although it will appear in the DOM).
如果 a<script>有一个 src 则元素的文本内容将不会作为 JS 执行（尽管它会出现在 DOM 中）。
You need to use multiple script elements.
您需要使用多个脚本元素。
- a
<script>to load the external script - a
<script>to hold your inline code (with the call to the function in the external script)
- a
<script>加载外部脚本 - a
<script>保存您的内联代码（调用外部脚本中的函数）
In your case you have to use two scripts as follows,
在您的情况下，您必须使用以下两个脚本，
<script src="http://code.responsivevoice.org/responsivevoice.js">
</script>
<script>
function sayhello(){
//function calls to externel js
}
</script>
回答by kouchao
If an external script is referenced, the script inside is not executed
如果引用了外部脚本，则不执行内部脚本
