Мне нужно вывести слово в div после нажатия кнопки

Question

После нажатия кнопки программа показывает новый div, но мне нужно так же в этом div вывести слово

JavaScript

  function showWindow() {
  var x = document.getElementById("click_chpsw");
  if (x.style.display == "none") {
    x.style.display = "inline-block";
  } else {
    x.style.display = "none";
  }
}

function showtext(y=""){
    var x = document.getElementById("textOfPage");
    x.innerHTML=y;
    }

HTML

<html lang="en">
    <head>
     <script src="show_hide_chpsw.js" type="text/javascript"></script>
    </head>
    <body> 
        <div id="click_chpsw" class="panel">
          <p id="textOfPage" style="color: black; size: 20px; text-align: left;"></p>
          <button onclick="showWindow()" onclick="showWindow('Change Password')"    class="btn-holder btn-style">Change Password</button>
/div>

CSS

 .panel {
  background-color: white;
  display: none;
  position: absolute;
  left: 22%;
  width: 1120px;
  height: 806px;
}
.btn-holder {
  align-content: center;
  display: flex;
  
}

.btn-style {
    background-color: RGB(41,127,182);
    color: white;
    border: none;
    height: 50px;
    width: 90px;
    text-align: center;
    font-size: 16px;
    padding: 4px 10px;
    cursor: pointer;
    text-decoration: none;
}

Проблема в том что окно у меня открывается, но текст не показывается

function showWindow() {
  var x = document.getElementById("click_chpsw");
  if (x.style.display == "none") {
    x.style.display = "inline-block";
  } else {
    x.style.display = "none";
  }
}

function showtext(y = "") {
  var x = document.getElementById("textOfPage");
  x.innerHTML = y;
}

.panel {
  background-color: white;
  display: none;
  position: absolute;
  left: 22%;
  width: 1120px;
  height: 806px;
}

.btn-holder {
  align-content: center;
  display: flex;
}

.btn-style {
  background-color: RGB(41, 127, 182);
  color: white;
  border: none;
  height: 50px;
  width: 90px;
  text-align: center;
  font-size: 16px;
  padding: 4px 10px;
  cursor: pointer;
  text-decoration: none;
}

<div id="click_chpsw" class="panel">
  <p id="textOfPage" style="color: black; size: 20px; text-align: left;"></p>
  <button onclick="showWindow()" onclick="showWindow('Change Password')" class="btn-holder btn-style">Change Password</button>
</div>

Answer 1

function showtext(y="Done"){
      var x = document.getElementById("textOfPage");
      x.textContent=y;
      var x = document.getElementById("click_chpsw");
        if (x.style.display == "none") {
          x.style.display = "inline-block";
        } else {
          x.style.display = "none";
        }
}

.panel {
    background-color: white;
    display: none;
  }
  .btn-holder {
    align-content: center;
    display: flex;
    
  }
  
  .btn-style {
      background-color: RGB(41,127,182);
      color: white;
      border: none;
      height: 50px;
      width: 90px;
      text-align: center;
      font-size: 16px;
      padding: 4px 10px;
      cursor: pointer;
      text-decoration: none;
  }

    <div id="click_chpsw" class="panel">
        <p id="textOfPage" style="color: black; size: 20px; text-align: left;"></p>
    </div>
    <button onclick='showtext("Done")' class="btn-holder btn-style">Change Password</button>

Тяжело ответить на ваш вопрос:

"После нажатия кнопки программа показывает новый div, но мне нужно так же в этом div вывести слово"

Какой новый див?

Answer 2

<!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>Document</title>
    <script type="text/javascript">

        function showWindow() {
            var x = document.getElementById("click_chpsw");
            var displayStyle = window.getComputedStyle(x).display;
            if (displayStyle === "none") {
                x.style.display = "inline-block";
            } else {
                x.style.display = "none";
            }
        }

        function showtext(y=""){
            var x = document.getElementById("textOfPage");
            x.innerHTML=y;
        }

        function buttonClickHandler({ text }) {
            showWindow();
            showtext(text);
        };

    </script>
    <style>
        .panel {
            background-color: white;
            display: none;
            position: absolute;
            left: 22%;
            width: 1120px;
            height: 806px;
        }
        .btn-holder {
            align-content: center;
            display: flex;
        }
        .btn-style {
            background-color: RGB(41,127,182);
            color: white;
            border: none;
            height: 50px;
            width: 90px;
            text-align: center;
            font-size: 16px;
            padding: 4px 10px;
            cursor: pointer;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="click_chpsw" class="panel">
        <p id="textOfPage" style="color: black; size: 20px; text-align: left;"></p>
    </div>
    <button onclick="buttonClickHandler({ text: 'Change password' })" class="btn-holder btn-style">Change Password</button>
</body>
</html>

для получения свойства используйте getComputedStyle метод. Иначе у Вас никогда не сработает условие

БЛОГ НА HUSL

Мне нужно вывести слово в div после нажатия кнопки

Ответы (2 шт):