I need to put my word out in div after the button is pressed.
-
After the button's down, the program shows a new div, but I need to put the word in that 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;
}
The problem is the window opens, but the text doesn't show.
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>
-
<!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>Use the method to obtain your properties.
Otherwise you'll never work.
