css 带有JS代码的HTML按钮不执行我请求的操作

trnvg8h3 于 2023-01-22 发布在其他

关注(0)|答案(1)|浏览(94)

我在测试修改JS命令，但是按钮什么也不做。我想，是CSS或HTML出了问题。我试过没有任何CSS，一个更基本的代码，它工作的JS部分，它删除了div。它可能是CSS的东西，但我不确定。
这是我的代码：

function eliminarDiv() {
  var div = document.querySelector("al-login");
  
  div.parentNode.removeChild(div);
}

@import url('https://fonts.cdnfonts.com/css/insaniburger');
.al-login {
  width: 300px;
  color: rgb(255, 255, 255);
  border-radius: 5px;
  background: rgb(95, 184, 220);
  text-align: center;
  height: 70px;
  margin-top: 100px;
  margin-left: calc(50% - 150px);
  line-height: 0px;
}

.button-x {
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  margin-left: 267px;
  border-radius: 5px;
  background: rgb(135, 135, 135);
  border: 2px rgb(135, 135, 135);
}

.button-x .x-button {
  margin-top: 1px;
  margin-left: -1px;
  color: white;
  font-size: 14px;
  font-family: 'Insaniburger';
  text-transform: none;
}

<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
<div class="al-login">
  <!--fas fa-eye fa-square-x-->
  <button class="button-x" onclick="eliminarDiv()"><p class="x-button">X</p></button>
  <p style="line-height: 0px; margin-top: 10px;">Dear user, you can login</p>
  <br style="line-height: 0px;">
</div>

css

来源：https://stackoverflow.com/questions/75191223/the-html-button-with-js-code-does-not-perform-the-action-i-requested

1条答案

按热度按时间

e3bfsja21#

这是可行的：

function eliminarDiv() {
  var div = document.querySelector(".al-login");//you forgot to add a point
  div.parentNode.removeChild(div);
}

@import url('https://fonts.cdnfonts.com/css/insaniburger');
.al-login {
  width: 300px;
  color: rgb(255, 255, 255);
  border-radius: 5px;
  background: rgb(95, 184, 220);
  text-align: center;
  height: 70px;
  margin-top: 100px;
  margin-left: calc(50% - 150px);
  line-height: 0px;
}

.button-x {
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  margin-left: 267px;
  border-radius: 5px;
  background: rgb(135, 135, 135);
  border: 2px rgb(135, 135, 135);
  cursor:pointer;  /* This can hit the user to close it */
}

.button-x .x-button {
  margin-top: 1px;
  margin-left: -1px;
  color: white;
  font-size: 14px;
  font-family: 'Insaniburger';
  text-transform: none;
}

<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
<div class="al-login">
  <button class="button-x" onclick="eliminarDiv()"><span class="x-button">X</span></button>
  <!--although it works in some case, do not use p inside button, also, you can just write what you want in a button-->
  <p style="line-height: 0px; margin-top: 10px;">Dear user, you can login</p>
  <br style="line-height: 0px;">
</div>

请记住，你应该在类之前添加一个点。另外，在按钮中使用span代替p，尽管在某些情况下它是有效的。最后一件我改变的事情是我添加了 * cursor：pointer;* 添加到你的代码中，这样用户就可以知道这可能是关闭的（因为有些用户认为默认的光标是不可点击的，比如我）

赞(0）回复(0）举报 2023-01-22

我来回答

css 带有JS代码的HTML按钮不执行我请求的操作

1条答案

相关问题

热门标签

最新问答