Ask coding questions

← Back to all posts
WHy does this not work? (jquery)
h
JULIODIAZ1 (47)

Im trying to make an unclickable button(so original) and im doing this by moving the button somewhere when hovering over it and it just dosent work. At first i thought it had to do with the random number generator but it didnt because it still logs the number in te console.

Javascript

$(document).ready(function(){
 
  $("#no").hover(function(){
    
    var x = null;
    $('#no').removeClass("top-left");
    $('#no').removeClass("top-right");
    $('#no').removeClass("bottom-left");
    $('#no').removeClass("bottom-right");
    $('#no').removeClass("center");

     let val = Math.floor(Math.random() * 4);
     console.log(val)
     

    if (val = 0){
      $("#no").addClass("top-left");
      }

    else if (val = 1){
      $("#no").addClass("top-right");
      }
    
    else if (val = 2){
      $("#no").addClass("bottom-left");
      }

    else if (val = 3){
      $("#no").addClass("bottom-right");
      }
  });

});

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <button class="center" id ="no" onclick="alert('NANIII, YOU CLICKED ME!')">Try and click me</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>
  </body>
</html>

CSS

.center{ position:absolute;
  left: 595px;
  top: 300px;
}

.top-left{ position: absolute;
  left: 5px;
  top: 5px;
}

.top-right{ position: absolute;
  right:5px;
  top: 5px;
}

.bottom-left{ position: absolute;
  left: 5px;
  bottom: 5px;
}

.bottom-right{ position: absolute;
  right: 5px;
  bottom: 5px;
}
Answered by Spotandjake (28) [earned 5 cycles]
View Answer
Comments
hotnewtop
Spotandjake (28)

next time might wanna embed your repl the code for a fix is there you need == on an if statement not = https://replit.com/@Spotandjake/HalfThirdKeygenerator#script.js hope that helps

JULIODIAZ1 (47)

but what does

let root = document.documentElement;
// btn.onmouseover = (e) => {
//   let x, y;
//   if (e.clientX <= window.screen.width/2) x = '75%';
//   else x = '0%';
//   if (e.clientY <= window.screen.height/2) y = '75%';
//   else y = '0%';
//   root.style.setProperty('--x', x);
//   root.style.setProperty('--y', y);
// }

do?

@Spotandjake

Spotandjake (28)

@JULIODIAZ1 that is commented out atm because it skews from your design it basically gets the position of the mouse on hover and sets css vars which I am using in the css i am using % because px breaks if someone is on a smaller screen you don't need to worry about that though it is not integral that is why it is commented out it is just an alternative way of doing it really.