How would you write a statement that is JavaScript imbedded in HTML vs normal JavaScript that would be written into a file?

Question

How would you write the statement bellow, that is JavaScript imbedded in HTML into normal JavaScript that would be written into a file? I am making a toggle switch, and I want to have the toggle after being clicked and going through the transformation go to a new file page. To make this possible I need to know the non-imbedded version of the function. This is what it is:

<div class="statement">Slide to Play!</div>
<div class="container">
<div class="play" onclick= "this.classId.toggle('active')"> 
<div class="inner-square"></div>
</div></div>

And in JavaScript this is what I have that doesn't work:

const transition = document.querySelector('play');
Promise.all(
    document.getElementById("play").onclick = function() {
        transition.addEventListener('transitionend', () => {
            console.log('Transition ended');
            location.assign("gamepage.html")
    }
);

Promise.all(
    
    })
).then(transition.addEventListener('transitionend', () => {
    console.log('Transition ended');location.assign("gamepage.html")});

When the script was embedded, was it in the or before the closing ? Wondering if the DOM is not ready when running from — neatlysliced, Mar 12 '21 at 05:00

score -1 · Answer 1 · answered Mar 12 '21 at 05:17

-1

Is it possible that the javascript is running before the DOM has loaded? Per the guidelines here $(document).ready equivalent without jQuery

Wrap your javascript with the following:

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

This should ensure that the whole HTML of the page has been loaded before your javascript is executed. If it was working while embedded, it may have been since you mentioned that your javascript was previously placed before the closing tag - the whole page was loaded by then.

answered Mar 12 '21 at 05:17

neatlysliced

235
1
5

I think i might have mistyped my question, I just want the part embedded in JavaScript to be – blamethegeese Mar 12 '21 at 12:54
for the onclick= "this.classId.toggle('active')" part – blamethegeese Mar 12 '21 at 12:55

How would you write a statement that is JavaScript imbedded in HTML vs normal JavaScript that would be written into a file?

1 Answers1