0

I am very new to Javascript and I am encountering this issue when I am writing two functions:

function playVid() 
{
var vid = document.getElementById("myVideo")
vid.play()
vid.muted = true
  }   



function colorchange()
{
  document.getElementById("maindiv").style.background-color = red
}

The error I am getting is:

SyntaxError: invalid assignment left-hand sideReferenceError: playVid is not defined onload@/:1:1

The function throws no error when I remove the second function. This is my HTML code:

<!DOCTYPE html>
<html>
  <head>
   
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body onload= "playVid()">

<div mouseover = "colorchange()" id ="maindiv">
    
     <video id="myVideo" width="520" height="276">
      <source
        src="https://cdn.glitch.me/0602af0a-36e2-436b-b41e-6a4a0bb25fee%2FCreating%20controls%20for%20your%20player%20.mov?v=16377041784186"
        type="video/mp4"
      />
    </video>
</div>
    <script src="script.js"></script>
  </body>
</html>
Hansa Narang
  • 11
  • 1
  • The preferred syntax is either `document.getElementById("maindiv").style.setProperty("background-color", "red");` or `document.getElementById("maindiv").style.backgroundColor = "red";`. – Sebastian Simon Nov 23 '21 at 23:19
  • Thank you! You are right! It still does not change the color of the division. I don't know what I am doing wrong. – Hansa Narang Nov 23 '21 at 23:23
  • `mouseover` isn’t an attribute that does anything. Inline event handlers like `onmouseover` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. – Sebastian Simon Nov 23 '21 at 23:24

0 Answers0