Question 233266 in Html Question posted in
Some basic documentation can be found here.

Html – (FIXED) JavaScript code stops working after adding new code

I am building my project on Neocities called NaNarchy. It’s been buttery smooth up until this point. I added two lines of code to my JS function, ticbtn.style.pointer-events = "none"; and ticbtn.style.cursor = "default";. With these lines, no JS works, but without them, it all works fine. Here’s my code:

  let count = 62;
  function flicker(){
    var logo = document.getElementById("logo");
    logo.style.opacity = "0.75";
    var x = Math.floor((Math.random() * 250) + 100);
    setTimeout(() => {  logo.style.opacity = "1.00"; }, x);  
  }
  function startf(){
      window.setInterval(flicker, 1650);
  }
  function starts(){
      document.getElementById("sheen").style.transform = "translateX(-300%)";
      window.setInterval(sheen, 100);
      
  }
  function resets(){
    count = 62;
    document.getElementById("sheen").style.transform = "translateX(-300%)";
  }
  function sheen(){
    document.getElementById("sheen").style.transform += "translateX(8%)";
    counter();
  }
  function counter(){
    count = count - 1;
    if (count < 1){
      resets();
  }
  }
  function dropdown(){
    ticbtn.style.opacity = "1.00";
    
  }
  function hideticbtn(){
    ticbtn.style.opacity -= "1.00";
/* buggy lines */
    ticbtn.style.pointer-events = "none";
    ticbtn.style.cursor = "default";
  }
    starts();
body {
  background-color: white;
  color: black;
  font-family: Verdana;
}
.logo {
  width: 33.3%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.bodywin {
  position: relative;
  width: 25%;
  transform: translate(-140%,100%);
  left: 50%;
  top: 0;
}
.sheen {
  position: absolute;
  height: 30%;
  left:50%;
  transform: translateX(-250%);
}
.center {
  position: relative;
  top: 0;
  left: 0;
  margin-left:auto;
  margin-right:auto;
}
.button {
  position: absolute;
  width: 17%;
  transform: translate(-134%,430%);
  left: 50%;
  top: 0;
}
.ticbtn {
  position: absolute;
  width: 17%;
  transform: translate(-60%,430%);
  left: 50%;
  top: 0;
  opacity: 0.00;
}
.bg {
  position:absolute;
  transform: translate(-50%,-5%);
  left: 50%;
  width: 100%;
}
 <img src="bg.png" class="bg">
  <img src="nanarchy.png" class="logo" id="logo">
  <img src="sheen3.png" class="sheen" id="sheen">
  <img src="/bodywin.png" class="bodywin">
  <img src="/button.png" class="button" onmousedown="dropdown()">
  <a href="https://www.ticalc.org"><img src="/ticbtn.png" class="ticbtn" id="ticbtn" onmouseout="hideticbtn()"></a>

To clarify, the buggy lines are in the "hideticbtn" class in my script. I’ve added a comment directly before them.

I have tried putting the code in a different script tag, in case there was a limit, and nope. I then double checked for typos, nope. I was expecting this code to work as well as the other code, but none of it works. I get thrown this error in the console: "Uncaught SyntaxError: Invalid left-hand side in assignment".

Tags:

3

Answers


  1. 0

    A JavaScript identifier usually starts with a letter, underscore (_), or dollar sign ($). Subsequent characters can also be digits (0 – 9).

    ‘pointer-events’ is a invalid variable, should use ‘pointerEvents’

    Login or Signup to reply.
  2. 0

    pointer-events is not a valid way to reference an object key. If a key has a hyphen in it, use brackets to access it: foo['bar-baz'] for example. Conventionally, you would use camelCase instead, though. Style attributes are automatically camelCased when using from JS, so instead you would use style.pointerEvents.

    Login or Signup to reply.
  3. 0

    You can try this

    document.getElementById("ticbtn").style.pointerEvents = "none";
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search