Две мои кнопки конфликтуют друг с другом - PullRequest
Новая
       21

Две мои кнопки конфликтуют друг с другом

0 голосов
/ 14 июля 2020

У меня есть сайт Adobe Muse, однако у меня есть возможность добавить HTML. Когда я запускаю одну кнопку, она работает отлично, но когда я добавляю вторую, возникает конфликт. Судя по тому, что вы видите, очевидно, что я не программист, но я построил свой сайт как можно лучше. Добавление этой небольшой функции помогает сделать мой сайт лучше. Не могли бы вы мне помочь? 

function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Book Details";
    moreText.style.display = "none";
    myBtn.style.backgroundColor = "#e6e6e6"
    btnText.style.color = "#004235";
    myBtn.style.border = "inset";
  }
  else {
    dots.style.display = "none";
    btnText.innerHTML = "Close Details";
    moreText.style.display = "inline";
    myBtn.style.backgroundColor = "#115599";
    btnText.style.color = "#FFFFFF";
  }
}
#h1 {
  font-size: 28px;
}

#h2 {
  font-size: 20px;
}

#h3 {
  font-size: 22px;
}

#more {
  display: none;
  font-size: 16px;
  float: left;
  position: absolute;
  width: 320px;
  padding-top: 10px;
}

.container {
  font-size: 20px;
  font-style: italic;
  font-family: 'Georgia', serif;
  color: #004235;
  width: 270px;
  height: 38px;
  border-radius: 3px;
  float: left;
  position: absolute;
  margin-top: -17px;
  background-color: #e6e6e6;
  border-width: 1px;
  border-color: #555555;
  border-style: inset;
  cursor: pointer;
}

.box {
  background-color: #e6e6e6;
  width: 180px;
  margin-top: 40px;
  padding-left: 10px;
  padding-right: 2px;
  float: left;
  position: absolute;
  box-shadow: 5px 10px 20px #888888;
  line-height: 20px;
  z-index: 10;
}

#pdfcolor {
  color: #A50000;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div>
    <p id="more" class="box">
      <span id="h1">Partial Dentures:</span><br><br>
      <b id="h3">Author:</b>&ensp; <span id="h3">Dr Dean Lloyd</span>
      <br><br>
      <b>Genre:</b>&ensp;..................&ensp;Health & Wellbeing<br>
      <b>Age Group:</b>&ensp;..........&ensp;There is more to this button but I have deleted the rest <br>
      <b>Language:</b>&ensp;...........&ensp;English<br>
      <b>Pages:</b>&ensp;..................&ensp;62<br>
      <b>Words:</b>&ensp;.................&ensp;Unknown<br>
      <b>Photographs:</b>&ensp;......&ensp;118<br>
      <br>
      <b>File Size:</b>&ensp;..............&ensp;14.60 Mb<br>
      <b>eBook Format:</b>&ensp;....&ensp;<span id="pdfcolor">PDF Download</span><br>
      <b>Publisher:</b>&ensp;............&ensp;Bookshelf Collections<br>
      <b>ISBN:</b>&ensp;...................&ensp;978-0-9943959-1-7<br><br>
      <b>Our Price:</b>&ensp;............ <b id="h3"><sup>$</sup>8.47</b><br><br><br>
      <span id="dots"></span><span id="more"></span></p>
  </div>
  <br>
  <button class="container" onclick="myFunction()" id="myBtn">Book Details</button>
</body>

</html>
...