简体   繁体   English

未捕获的ReferenceError:在HTMLButtonElement.onclick中未定义函数

[英]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. 您需要使用多个脚本元素。

  1. a <script> to load the external script <script>来加载外部脚本
  2. a <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.

相关问题 未捕获的ReferenceError :(函数)未在HTMLButtonElement.onclick中定义 - Uncaught ReferenceError: (function) not defined at HTMLButtonElement.onclick Uncaught ReferenceError: (function) is not defined at HTMLButtonElement.onclick - Uncaught ReferenceError: (function) is not defined at HTMLButtonElement.onclick 得到此错误Uncaught ReferenceError:函数未在HTMLButtonElement.Onclick上定义? - Getting this error Uncaught ReferenceError: function is not defined at HTMLButtonElement.Onclick? ES6模块“Uncaught ReferenceError:函数未在HTMLButtonElement.onclick中定义” - ES6 module “Uncaught ReferenceError: function is not defined at HTMLButtonElement.onclick” 未捕获的ReferenceError:未在HTMLButtonElement.onclick中定义查找 - Uncaught ReferenceError: lookup is not defined at HTMLButtonElement.onclick 未捕获的 ReferenceError:showCurrentPage 未在 HTMLButtonElement.onclick 中定义 - Uncaught ReferenceError: showCurrentPage is not defined at HTMLButtonElement.onclick 未捕获的 ReferenceError:在 HTMLButtonElement.onclick 中未定义 postAcmgForm - Uncaught ReferenceError: postAcmgForm is not defined at HTMLButtonElement.onclick 未捕获的ReferenceError:HTMLButtonElement.onclick中未定义submitToAPI - Uncaught ReferenceError: submitToAPI is not defined at HTMLButtonElement.onclick 未捕获的 ReferenceError:id 未在 HTMLButtonElement.onclick 中定义 - Uncaught ReferenceError: id is not defined at HTMLButtonElement.onclick 未捕获的ReferenceError:未在HTMLButtonElement.onclick上定义toggleFunction - Uncaught ReferenceError: toggleFunction is not defined at HTMLButtonElement.onclick
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM