[英]Uncaught ReferenceError: function is not defined at HTMLButtonElement.onclick
Below is the html for an index page I've been working on. 以下是我一直在努力的索引页面的html。 I want to create a button with an onclick function to say "hello world".
我想创建一个带有onclick函数的按钮来说“ hello world”。 So I used the script at the bottom of the page, but the button triggers the error described.
因此,我在页面底部使用了脚本,但是该按钮触发了所描述的错误。
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();
}
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). 如果
<script>
具有src,则该元素的文本内容将不会作为JS执行(尽管它将出现在DOM中)。
You need to use multiple script elements. 您需要使用多个脚本元素。
<script>
to load the external script <script>
来加载外部脚本 <script>
to hold your inline code (with the call to the function in the external script) <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>
如果引用了外部脚本,则不执行内部脚本
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.