CODEWITHSUNDEEP
javascripthtmlcss
Nathan Tolley
Nathan Tolley

Reputation: 33

How to make an OnClick event to add a border to a button?

Hi I am attempting to make a 2D version of Minecraft with JavaScript, CSS, and HTML:5. I ran into a problem when constructing the hot bar. I want to apply a border to the button when it is clicked but it comes up with this exception.

SyntaxError: Unexpected end of input at /:11:143

Here is the index.HTML script:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>2D Minecraft</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
    <button class="hotbar1" id="hotbar1" onclick="document.getElementById("hotbar1").style.border: 7.5px solid Gray;"/>
    <button class="hotbar2" id="hotbar2"/>
    <button class="hotbar3" id="hotbar3"/>
    <button class="hotbar4" id="hotbar4"/>
    <button class="hotbar5" id="hotbar5"/>
    <button class="hotbar6" id="hotbar6"/>
    <button class="hotbar7" id="hotbar7"/>
    <button class="hotbar8" id="hotbar8"/>
    <button class="hotbar9" id="hotbar9"/>
    <style>
      body{
  background: #191919;
}
.hotbar1{
  background: White;
  width: 100px;
  height: 100px;
  margin: 0px;
  padding: 0px;
  position: absolute;
  bottom: 0px;
  left: 17%;
}
.hotbar2{
  background: White;
  width: 100px;
  height: 100px;
  margin: 0px;
  padding: 0px;
  position: absolute;
  bottom: 0px;
  left: 24.5%;
}
.hotbar3{
  background: White;
  width: 100px;
  height: 100px;
  margin: 0px;
  padding: 0px;
  position: absolute;
  bottom: 0px;
  left: 32%;
}
.hotbar4{
  background: White;
  width: 100px;
  height: 100px;
  margin: 0px;
  padding: 0px;
  position: absolute;
  bottom: 0px;
  left: 39.5%;
}
.hotbar5{
  background: White;
  width: 100px;
  height: 100px;
  margin: 0px;
  padding: 0px;
  position: absolute;
  bottom: 0px;
  left: 47%;
}
.hotbar6{
  background: White;
  width: 100px;
  height: 100px;
  margin: 0px;
  padding: 0px;
  position: absolute;
  bottom: 0px;
  left: 54.5%;
}
.hotbar7{
  background: White;
  width: 100px;
  height: 100px;
  margin: 0px;
  padding: 0px;
  position: absolute;
  bottom: 0px;
  left: 62%;
}
.hotbar8{
  background: White;
  width: 100px;
  height: 100px;
  margin: 0px;
  padding: 0px;
  position: absolute;
  bottom: 0px;
  left: 69.5%;
}
.hotbar9{
  background: White;
  width: 100px;
  height: 100px;
  margin: 0px;
  padding: 0px;
  position: absolute;
  bottom: 0px;
  left: 77%;
}
    </style>
  </body>
</html>

Upvotes: 0

Views: 101

Answers (3)

Rohit Khandelwal
Rohit Khandelwal

Reputation: 632

This will work, I have updated onclick of your button, just compare and you will get to know what changed here.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>2D Minecraft</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <style>
    body {
      background: #191919;
    }
    
    .hotbar1 {
      background: White;
      width: 100px;
      height: 100px;
      margin: 0px;
      padding: 0px;
      position: absolute;
      bottom: 0px;
      left: 17%;
    }
    
    .hotbar2 {
      background: White;
      width: 100px;
      height: 100px;
      margin: 0px;
      padding: 0px;
      position: absolute;
      bottom: 0px;
      left: 24.5%;
    }
    
    .hotbar3 {
      background: White;
      width: 100px;
      height: 100px;
      margin: 0px;
      padding: 0px;
      position: absolute;
      bottom: 0px;
      left: 32%;
    }
    
    .hotbar4 {
      background: White;
      width: 100px;
      height: 100px;
      margin: 0px;
      padding: 0px;
      position: absolute;
      bottom: 0px;
      left: 39.5%;
    }
    
    .hotbar5 {
      background: White;
      width: 100px;
      height: 100px;
      margin: 0px;
      padding: 0px;
      position: absolute;
      bottom: 0px;
      left: 47%;
    }
    
    .hotbar6 {
      background: White;
      width: 100px;
      height: 100px;
      margin: 0px;
      padding: 0px;
      position: absolute;
      bottom: 0px;
      left: 54.5%;
    }
    
    .hotbar7 {
      background: White;
      width: 100px;
      height: 100px;
      margin: 0px;
      padding: 0px;
      position: absolute;
      bottom: 0px;
      left: 62%;
    }
    
    .hotbar8 {
      background: White;
      width: 100px;
      height: 100px;
      margin: 0px;
      padding: 0px;
      position: absolute;
      bottom: 0px;
      left: 69.5%;
    }
    
    .hotbar9 {
      background: White;
      width: 100px;
      height: 100px;
      margin: 0px;
      padding: 0px;
      position: absolute;
      bottom: 0px;
      left: 77%;
    }
  </style>
</head>

<body>
  <script src="script.js"></script>
  <button class="hotbar1" id="hotbar1" onclick="document.getElementById('hotbar1').style.border = '7.5px solid red'" />
  <button class="hotbar2" id="hotbar2" />
  <button class="hotbar3" id="hotbar3" />
  <button class="hotbar4" id="hotbar4" />
  <button class="hotbar5" id="hotbar5" />
  <button class="hotbar6" id="hotbar6" />
  <button class="hotbar7" id="hotbar7" />
  <button class="hotbar8" id="hotbar8" />
  <button class="hotbar9" id="hotbar9" />
</body>

</html>

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65806

onclick="document.getElementById("hotbar1").style.border: 7.5px solid Gray;"

should be:

onclick="document.getElementById("hotbar1").style = 'border: 7.5px solid Gray'"

Upvotes: -1

Kinglish
Kinglish

Reputation: 23654

This line is malformed both in the incorrect use of quotes inside of a quoted string and in the way you specify the style change:

 onclick="document.getElementById("hotbar1").style.border: 7.5px solid Gray;"

it should be

 onclick="document.getElementById('hotbar1').style.border='7.5px solid Gray'";

Upvotes: 1

Related Questions