Question

我已经为我的RPi开发了一个新的网站（慢慢地）。当我点击任一按钮时，按钮和其他所有内容都会消失，仅替换为红色背景中的文本。我做错了什么？

网页：

<!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>

这是CSS文件：

.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;
}

和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!!";
    }
}

Answer 1

在您的JS中，您正在删除该按钮并将其替换为文本通过包装文本来修复它＆＃34;门是安全的＆＃34;在如下的范围内：

<span>Door is Secure</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

Answer 2

我假设您所希望的行为适用于文本＆＃34;门是安全的＆＃34;改为＆＃34;门打开＆＃34;并且您希望背景颜色为红色。

如果这个假设是正确的，那么你的问题是boxField是以你的表中的整个列为目标。因此，当您执行boxField.innerHTML="Door Open!!";时，您将替换该列的全部内容。因此，您需要将文本与整个列分开。

这样做的一种方法可能是：

在HTML中，对于每个门，将文本包装在带有id的p标签中。例如：<p id="textLeft">Door is Secure</p>

然后，在您的buttonHandler（）函数中，将boxField.innerHTML="Door Open!!";更改为textLeft.textContent="Door Open!!";

单击时按钮消失

2 个答案:

JSFiddle Demo