Question

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

最令人困惑的部分，按钮运行正常，直到我更改了该功能的名称。我已经遇到了麻烦，即使我将功能名称改回现在的状态。

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

Answer 1

如this question

中所述

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

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

一个<script>来加载外部脚本
一个<script src="http://code.responsivevoice.org/responsivevoice.js"> </script> <script> function sayhello(){ //function calls to externel js } </script>来保存您的内联代码（在外部脚本中调用该函数）

在您的情况下，您必须使用以下两个脚本，

<?php
   return [
     'list' => ' 
            @if ($errors->has(\'image\'))
            <span class="help-block">
            <strong>{{ $errors->first(\'image\') }}</strong>
            </span>
            @endif
        '
   ];

Answer 2

如果引用了外部脚本，则不执行内部脚本

Answer 3

   <script src="http://code.responsivevoice.org/responsivevoice.js">
    
    </script>
    
    <script>
     $(document).ready(function() { 
        function sayhello(){
            //function calls to externel js
        }
    }); 
    </script>

未捕获的ReferenceError：HTMLButtonElement.onclick

3 个答案: