function not defined onclick with javascript

Question

i am trying to play audio file on click of div, and then with the next click of the div pause it. However, I am very new to javascript and the first function isn't even executing, and i don't understand how it isn't defined.

here is my code:

<!DOCTYPE html>
<html>

<head>
    <style>
        .floating-box {
            display: inline-block;
            width: 150px;
            height: 75px;
            margin: 10px;
            border: 3px solid #73AD21;
        }

        .after-box {
            clear: left;
            border: 3px solid red;
        }

        .player
    </style>
</head>
<script>
    var has_been_played = 0;

    function playSound() {
        var aud=new Audio(file);
        aud.play();
        var b1 = document.getElementbyId("box" + num);
        var b1.has_been_played == true;

    }

    var b1.has_been_played = pauseAud() {
        document.getElementById("box" + num).setAttribute("onClick",
            "javascript: pauseAud();");
    }

    function pauseAud() {
        var aud=new Audio(file);

        aud.pause();
    }
</script>

<body>
    <div id="box1" class="floating-box" onclick="playSound('donttalk.mp3');"></div>
    <div id="box2" class="floating-box" onclick="playSound('goodvibrations.mp3');"></div>
</body>

</html>

I want it to play the sound, and then once it has been clicked the variable changes to "has_been_played" and the next time you click that div the audio file will pause. (hopefully then, the next you click it it will play again.

Why is it saying that the function playSound is not defined onclick?

You code is littered with syntax errors, missing variables, and (frankly) nonsense. You need to open the JS console in your browser and start working through the error messages. — Quentin
– Quentin, Commented Dec 4, 2017 at 21:30
I figured as much; however, the only error messages are that the period in b1.has_been_played is an unexpected syntax error (and I know I was doing that wrong) and that "playSound" is not defined onclick. I wanted to figure out why playSound isnt playing sound before tackling the more complex parts, since that part is very basic. Thank you for being frank about my nonsensical code...I am very confused and that is why I came for help! — plutoneedshelp
– plutoneedshelp, Commented Dec 4, 2017 at 21:45
Deal with error messages one at a time, in the order they are reported by the browser. Start with the ones that are reported as the page loads. They will tell you why the function isn't defined. — Quentin
– Quentin, Commented Dec 4, 2017 at 21:48

Robbie Milejczak · Accepted Answer · 2017-12-04 20:56:59Z

1

You need to add the function to the window like so:

function playSound(){
    aud.play();
     var b1= document.getElementbyId("box"+num);
    var b1.has_been_played == true;

}

window.playSound = playSound;

answered Dec 4, 2017 at 20:56

Robbie Milejczak

5,8203 gold badges37 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Quentin Over a year ago

The function declaration already creates that global variable! This is one the few things that isn't wrong with the code in the question.

Smahane Over a year ago

I had the same issue and that worked for me! thank you!

Collectives™ on Stack Overflow

function not defined onclick with javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related