Uncaught ReferenceError: function is not defined at HTMLButtonElement.onclick

Question

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.

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

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

there's a JS file in my directory that's included in this html at script.js. I'll share it.... it might be irrelevant — RacketyGnome300, Nov 25 '17 at 08:30
It is `sayhello` function which is not defined. The inline script within a script tag, which also has `src` attribute, is ignored. You've to create another script tag for `sayhello` function. See [` — Teemu, Nov 25 '17 at 08:38

score 4 · Answer 1 · answered Nov 25 '17 at 08:43

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).

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)

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>

kouchao · Accepted Answer · 2017-11-25T08:40:48.937

2

If an external script is referenced, the script inside is not executed

edited Nov 25 '17 at 08:40

answered Nov 25 '17 at 08:31

kouchao

36
3

Uncaught ReferenceError: function is not defined at HTMLButtonElement.onclick

2 Answers2