Move a button by setting CSS using Javascript

Question

 <!DOCTYPE html>
 <html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./files/jquery-1.11.2.min.js"></script>
     <script src="./files/bootstrap.min.js"></script>
     <link rel="stylesheet" href="./files/font-awesome.min.css">
  <style>
   body {
    font-family: "Helvetica Neue", Helvetica, Arial, NanumBarunGothic, NanumGothic, "Apple SD Gothic Neo", sans-serif;
   }
   a {
    font-size: 36px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
    color: #0099cc;
    background-color: transparent;
    box-sizing: border-box;
   }
      a:hover {
       color: #4dd2ff;
       outline: none;
       border-bottom: 1px dotted;
   }
   hr {
       margin-bottom: 23px;
       border: 0;
       border-top: 1px solid #b8b8b8;
   }
   .button2 {
    position: absolute;
   }
  </style>
  <script>
   function alertKWEB() {
    window.alert("Me too");
   }
   function alertKWEB2() {
    window.alert("K★W★E★B");
   }
   function moveButtonRand() {
    var buttonTag=document.getElementsByClassName('button2');
    var positionTop=Math.floor(Math.random()*90+5);
    var positionLeft=Math.floor(Math.random()*90+5);
    buttonTag.style.top=positionTop+"%";
    buttonTag.style.left=positionLeft+"%";
   }
  </script>
 </head>
 <body>
  <div class="main" style="text-align: center; width: 100%; height: 100%">
   <h1><a href="https://kweb.korea.ac.kr/">Do you love KWEB?</a></h1>
   <hr>
   <button onclick="alertKWEB()">I do</button>
   <button class="button2" onclick="alertKWEB2()" onmouseover="moveButtonRand()">.....</button>
  </div>
 </body>
 </html>

I want to make the second button move to a random position when I put the cursor over it. I don't understand why this does not work; please help! This is my school homework which entails using the JS DOM, so please do not suggest other ways.

`.getElementsByClassName()` returns an `HTMLCollection`, not a single element — guest271314, Jun 07 '17 at 19:06
`getElementsByClassName` returns an array of elements, but you're using it as if it returns an element. This is likely reflected by an error in your browsers console. — , Jun 07 '17 at 19:06
Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Heretic Monkey, Jun 07 '17 at 19:07
@guest271314 I'm aware it isn't, but an HtmlCollection is "an array-like collection of elements". Huge difference. — , Jun 07 '17 at 19:10

KevBot · Answer 1 · 2017-06-07T19:11:38.493

2

document.getElementsByClassName() returns an HTMLCollection not an individual element. You can solve this by referencing the first element in the HTMLCollection:

var buttonTag = document.getElementsByClassName('button2')[0];

Or use document.querySelector():

var buttonTag = document.querySelector('.button2');

edited Jun 07 '17 at 19:11

answered Jun 07 '17 at 19:07

KevBot

17,900
5
50
68

oh thanks! i am weak at js. thanks for kind explanation – nestiank Jun 07 '17 at 19:10

score 1 · Accepted Answer · answered Jun 07 '17 at 19:13

1

Use this in your moveButtonRand() function:

buttonTag[0].style.top=positionTop+"%";
buttonTag[0].style.left=positionLeft+"%";

Or add an ID to that button, then use:

var buttonTag=document.getElementById('id_button2');

answered Jun 07 '17 at 19:13

CoursesWeb

4,179
3
21
27

slevy1 · Answer 3 · 2017-06-07T21:53:10.263

function alertKWEB() {
  alert("Me too");
}

function alertKWEB2() {
  alert("K★W★E★B");
}

var m = Math;
m.c = m.ceil;
m.f = m.floor;
m.r = m.random;

function moveButtonRand() {
  var bTag = document.querySelector('.button2');
  var min = 1;
  var max = 95;
  // inclusive random number btw two values
  var res = m.f(m.r() * (max - min + 1)) + min;
  bTag.style.top = res + "%";
  bTag.style.left = res + "%";
}

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./files/jquery-1.11.2.min.js"></script>
  <script src="./files/bootstrap.min.js"></script>
  <link rel="stylesheet" href="./files/font-awesome.min.css">
  <style>
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, NanumBarunGothic, NanumGothic, "Apple SD Gothic Neo", sans-serif;
    }
    
    a {
      font-size: 36px;
      font-weight: 500;
      text-decoration: none;
      transition: color 0.3s;
      color: #0099cc;
      background-color: transparent;
      box-sizing: border-box;
    }
    
    a:hover {
      color: #4dd2ff;
      outline: none;
      border-bottom: 1px dotted;
    }
    
    hr {
      margin-bottom: 23px;
      border: 0;
      border-top: 1px solid #b8b8b8;
    }
    
    .button2 {
      position: absolute;
    }
  </style>

</head>

<body>
  <div class="main" style="text-align: center; width: 100%; height: 100%">
    <h1><a href="https://kweb.korea.ac.kr/">Do you love KWEB?</a></h1>
    <hr>
    <button onclick="alertKWEB()">I do</button>
    <button class="button2" onclick="alertKWEB2()" onmouseover="moveButtonRand()">.....</button>
  </div>
</body>

</html>

This script selects the button whose class is ".button2" using the aforementioned suggestion of using document.querySelector. Also, it employs some shortcuts which reduces the verbosity. But, most importantly it uses a technique suggested by the MDN to improve the randomness.

Move a button by setting CSS using Javascript

3 Answers3