javascript 如何在按钮上显示变量?

yzckvree  于 2023-02-21  发布在  Java
关注(0)|答案(2)|浏览(144)

我正在建立一个学校的时间表,现在得到了一个弹出窗口,你可以输入你的主题和它保存在一个变量.我怎么能让这个变量显示在其中一个按钮?这是我的HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv= "X-UA-Compatible" content= "IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Schulplaner</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <header>
    <div class="logo">Schulplaner</div>
    <div class="hamburger">
      <div class="line"></div>
        <div class="line"></div>
          <div class="line"></div>
    </div>
    <nav class="nav-bar">
      <ul>
        <li>
          <a href="Startseite.html" >Startseite</a>
        </li>
        <li>
          <a class="active" href="Stundenplan.html">Stundenplan</a>
        </li>
      </ul>
    </nav>
  </header>
  <main class="Stundenplan">
    <div class="grid-container">

      <div class="empty"></div>

      <div class="Tage">Montag</div>
      <div class="Tage">Dienstag</div>
      <div class="Tage">Mittwoch</div>
      <div class="Tage">Donnerstag</div>
      <div class="Tage">Freitag</div>
      
      <div class="Stunden">1.Stunde</div>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      
      <div class="Stunden">2.Stunde</div>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>

      <div class="Stunden">3.Stunde</div>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>

      <div class="Stunden">4.Stunde</div>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>

      <div class="Stunden">5.Stunde</div>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>

      <div class="Stunden">6.Stunde</div>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>

      <div class="Stunden">7.Stunde</div>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>

      <div class="Stunden">8.Stunde</div>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>

      <div class="Stunden">9.Stunde</div>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>

      <div class="Stunden">10.Stunde</div>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      <button type="button" class="btn" onclick="openPopup()"><strong>+</strong></button>
      
      <div class="popup" id="popup">
        <h2>Fach eingeben</h2>
        <input type="text" id="fach"/> 
        <input type="color" />
        <button type="button" onclick="Fach()">OK</button>
      </div>
    
    </div>
  </main>
</body>
</html>

这是我的JS代码:

hamburger = document.querySelector(".hamburger");
    hamburger.onclick = function()
    {
      navBar = document.querySelector(".nav-bar");
      navBar.classList.toggle("active");
    }
let popup = document.getElementById("popup");

function openPopup(){
    popup.classList.add("open-popup");
}
function closePopup(){
    popup.classList.remove("open-popup");
}
function Fach() {
    var textInput = document.getElementById("fach").value;
}

我还没有尝试太多,因为我是新的html和js,但我没有找到任何解决方案在线。我的目标是改变按钮显示从'+'的主题变量。

xoefb8l8

xoefb8l81#

将类添加到<strong>标记,然后...

strongEl = document.querySelector(".your-class");
strongEl.textContent = var;
dbf7pr2w

dbf7pr2w2#

要在JavaScript中显示html元素中的某些内容,可以使用innerHTML。

element.innerHTML = variable;

https://developer.mozilla.org/fr/docs/Web/API/Element/innerHTML

相关问题