个人中心
gpt4 book ai didi

javascript - Uncaught ReferenceError : function is not defined at HTMLButtonElement. onclick

转载 作者：行者123 更新时间：2023-11-28 12:16:51 25 4
gpt4 key购买 nike

下面是我一直在处理的索引页的 html。我想创建一个带有 onclick 函数的按钮来说“hello world”。所以我使用了页面底部的脚本，但是按钮触发了所描述的错误。

最令人困惑的部分是，该按钮一直运行良好，直到我更改了该函数的名称。从那以后我就遇到了麻烦，即使我将函数名称改回了现在的名称。

<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 文件

    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();
}

最佳答案

如 this question 中所述

如果 <script>如果有 src 那么该元素的文本内容将不会作为 JS 执行(尽管它会出现在 DOM 中)。

您需要使用多个脚本元素。

  1. 一个<script>加载外部脚本
  2. 一个<script>保存内联代码(通过调用外部脚本中的函数)

在您的情况下，您必须使用两个脚本，如下所示，

<script src="http://code.responsivevoice.org/responsivevoice.js">

</script>

<script>
    function sayhello(){
        //function calls to externel js
    }
</script>

关于javascript - Uncaught ReferenceError : function is not defined at HTMLButtonElement. onclick，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47483960/

25 4 0
文章推荐： 缩小后在 Firefox 中裁剪掉 CSS 背景图像
文章推荐： javascript - 如果单击的是 div 内的按钮，则忽略 div 单击
文章推荐： css - 无法使用 Bootstrap 在 Web 表单应用程序中内联显示
文章推荐： ios - 在转换前检查 String 是否有货币符号
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com