Question

我在创建网页上的元素时遇到了问题，应该单击一次运行的功能仅在单击一次后才运行。因此，第一次单击完全不执行任何操作，而其他所有单击均按预期工作。这是我的代码：

HTML：

<div>
  <a href="#0" class="packservice" id="rent">Rentals</a>
</div>
<div id="myDIV">
<div class="divinfo">
<div class="servicestxt">
  <h2> Rentals </h2>
<hr>
<br>
  <p>Rent professional beverage serving equpment for your next event. This is our self serve option.</p><br>
  <a href="#0" id="renBut"> Add to Quote </a>
</div>
</div>
</div>

CSS：

#myDIV {
  display: none;
  color: black;
  padding: 2.5% 71.5% 1.5% 1%;
  background-color: white;
}
a.packservice {
  padding: 1% 97% 1% 1%;
  background: gray;
  opacity: 0.5;
  font-family: 'Oswald', sans-serif;
  font-weight: 900;
  color: white;
  margin-top: .25%;
  display: block;
}
#packhead {
  font-family: 'Oswald', sans-serif;
}
.divinfo {
 width: 250%;
 display: block;
 background-color: white;
 margin-left: 50%;
 overflow: auto;
}

JavaScript：

var renBut = document.getElementById("renBut");
var rent = document.getElementById("rent");

function rentalStore() {
if (renBut.innerHTML=="Add to Quote"){
sessionStorage.setItem("rental", true);
renBut.innerHTML = "Remove from Quote"
} else {
    sessionStorage.removeItem("rental");
    renBut.innerHTML = "Add to Quote";
   }
}

//Create function to hide rentals information div
function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}

function clickDom() {
// Create event to listen for click and call corresponding function
console.log("Entering clickDom() function");
   if (rent.addEventListener) {
    rent.addEventListener("click", myFunction, false);
  }
}  
function buttonEl() {
if (renBut.addEventListener) {
    renBut.addEventListener("click", rentalStore, false);
  }
}

if (window.addEventListener) {
  //call init() on page load
   console.log("> Adding TC39 Event Listener...");
   window.addEventListener ("load", buttonEl, false);
}

if (window.addEventListener) {
   console.log("> Adding TC39 Event Listener...");
   window.addEventListener ("load", clickDom, false);
}

我也将其上传到了这里的一个Codepen：https://codepen.io/seanbarker182/pen/maexPd

javascript在这里有两件事，第一件事就是简单地在单击时取消隐藏或隐藏div，因此它要求用户先单击“ Rentals”，这会显示我遇到问题的区域，即“添加到报价”按钮。您会注意到，第一次单击根本不执行任何操作，而第二次单击或任何后续的点击则按预期进行。

有人知道为什么需要第一次单击才能起作用吗？

Answer 1

问题非常简单，感谢您添加codepen！

您的HTML中包含以下内容：

<a href="#0" id="renBut"> Add to Quote </a>

但是，在您的JS中，您有：

if (renBut.innerHTML=="Add to Quote"){

在运行时，renBut.innerHTML的值为" Add to Quote "，请注意两端的多余空格。该修复程序可以通过两种方式应用：

删除HTML空间

<a href="#0" id="renBut">Add to Quote</a>

使JavaScript空格独立

if (renBut.innerHTML.trim()=="Add to Quote"){

您采用哪种方式只是个人喜好，但就个人而言，我会同时选择这两种方式来确保一致性和将来的证明。

元素需要单击两次才能运行功能

1 个答案: