CODEWITHSUNDEEP
javascripthtmlcss
JimS-CLT
JimS-CLT

Reputation: 675

Button disappears when clicked

I've got a new web site I'm (slowly) developing for my RPi. When I click on either button, the button and everything else disappears, replaced by the text only, in a red background. What did I do wrong?

The Web page:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <title>Garage Doors</title>
  <script src="Scripts/GDScripts.js"></script>
  <link rel="stylesheet" href="Styles/GDStyles.css" type="text/css">
</head>

<body>
  <div>
    <table class="statusBox">
      <tbody>
        <tr>
          <td class="statusBox" id="leftBox">
            <button onclick="handleButton(this)" name="buttonLeft" type="button" class="myButton" id="buttonLeft">
              Toggle Left Garage Door
            </button>
            <br>Door is Secure
          </td>
          <td class="statusBox" id="rightBox">
            <button onclick="handleButton(this)" name="buttonRight" class="myButton">
              Toggle Right Garage Door
            </button>
            <br>Door is Secure
          </td>
        </tr>
      </tbody>
    </table>
    <br>
  </div>
</body>
</html>

Here's the CSS file:

.myButton {
  border: 1px solid #337fed;
  padding: 6px 24px;
  background-color: #3d94f6;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  -moz-border-radius-bottomright: 6px;
  -moz-border-radius-bottomleft: 6px;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 19px;
  font-weight: bold;
  text-decoration: none;
  text-shadow: #1570cd 0px 1px 0px;
}
.myButton:hover {
  background-color: #1e62d0;
}
.myButton:active {
  position: relative;
  top: 1px;
}
.statusBox {
  border-style: ridge;
  border-width: 2pt;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 11pt;
  color: #000066;
  background-color: #33ff33;
  text-align: center;
}

and the Javascript:

function handleButton(element)  {
    var boxField;
    if (element.id == "buttonLeft") {
        element.innerHTML="Left Garage Door Toggled";
        boxField = document.getElementById('leftBox');
        boxField.style.backgroundColor="#f50c18";
        boxField.textContent="Door Open!!";
    }
    else {
        element.innerHTML="Right Garage Door Toggled";
        boxField = document.getElementById('rightBox');
        boxField.style.backgroundColor="#f50c18";
        boxField.innerHTML="Door Open!!";
    }
}

Upvotes: 0

Views: 576

Answers (2)

jennEDVT
jennEDVT

Reputation: 739

I'm assuming that your desired behavior is for the text "Door is secure" to change to "Door open" and you want the background color to be red.

If that assumption is correct, then your problem is that boxField is targeting the entire column in your table. Therefore when you do boxField.innerHTML="Door Open!!"; you are replacing the entire contents of that column. So you need to target the text separate from the entire column.

One approach to do this could be:

In your HTML, for each door, wrap the text in a p tag with an id. eg: <p id="textLeft">Door is Secure</p>

Then, in your buttonHandler() function, change boxField.innerHTML="Door Open!!"; to be textLeft.textContent="Door Open!!";

Upvotes: 1

Jacob G
Jacob G

Reputation: 14172

In your JS, you are removing the button and replacing it with the text.
Fix it by wrapping the text "Door is Secure" in a span like:

<span>Door is Secure</span>

Then, target the span:

function handleButton(element) 
{
    var boxField;
    if (element.id == "buttonLeft")
        {
         element.innerHTML="Left Garage Door Toggled";
         boxField = document.querySelector("#leftBox span");
         boxField.style.backgroundColor="#f50c18";
         boxField.textContent="Door Open!!";
         }
    else
        {
         element.innerHTML="Right Garage Door Toggled";
         boxField = document.querySelector("#rightBox span");
         boxField.style.backgroundColor="#f50c18";
         boxField.innerHTML="Door Open!!";
         }
}

JSFiddle Demo

Upvotes: 1

Related Questions