Issue
Here's what I'm trying to do: When a button is clicked, one paragraph element is replaced by another paragraph element. I'd like it to be seamless, where the one paragraph element just disappears, and the other paragraph element appears in its place.
But no matter what I try I can't seem to get the other paragraph element to appear. The paragraph element to be hidden disappears fine, but the other span element doesn't appear in its place.
I've tried many different approaches, like
<p style="display: none;" id="element_to_show">text to show</p>
...
document.getElementById('element_to_show').style.display = "block";
as well as
<p hidden id="element_to_show">text to show</p>
...
document.getElementById('element_to_show').hidden = false;
as well as
<p style="visibility: hidden;" id="element_to_show">text to show</p>
...
document.getElementById('element_to_show').style.visibility = "visible";
but nothing seems to work.
I'm aware that in Javascript I could create the new paragraph I want by document.createElement() and then using replaceWith(), but there are various other elements inside the paragraph element that I would have to recreate and that would be messy programmatically. That's not to mention the fact that I would have to recreate the original paragraph element when the user clicks another button to bring that paragraph element back. It seems so easy just to code the elements in HTML and show and hide them on the button click, but I just can't get it right.
Note: Please do not show me how to do this in jQuery unless you think it's the only way. I'd like to accomplish it in vanilla Javascript, if possible, please.
Here's the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to our website!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="profile">
<p id="profile_first_name_show">
<span class="profile_label">First name:</span>
<span id="profile_first_name_edit">
<span id="profile_first_name_value">{{ request.session.current_user_data.first_name }}</span>
<button onclick="show_hidden()"><span class="glyphicon glyphicon-pencil"></span></button>
</span>
</p>
<p style="visibility: hidden;" id="profile_first_name_edit">
text to show
</p>
</div>
</body>
</html>
and here's the .js file
function show_hidden() {
document.querySelector("#profile_first_name_edit").style.visibility = "visible"; // this and various other methods don't work!!
document.getElementById('profile_first_name_show').style.display = "none"; // this works!
}
Solution
if you use visibility elements will take up space in the dom even when they are hidden. If you want to replace an element use display:none. Also id's have to be unique
function show_hidden() {
document.getElementById("profile_first_name_edit2").style.display='block'
document.getElementById('profile_first_name_show').style.display = "none"; // this works!
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to our website!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="profile">
<p id="profile_first_name_show">
<span class="profile_label">First name:</span>
<span id="profile_first_name_edit">
<span id="profile_first_name_value">Dave Smith</span>
<button onclick="show_hidden()">click me</button>
</span>
</p>
<p style='display:none' id="profile_first_name_edit2">
text to show
</p>
</div>
</body>
</html>Answered By - DCR
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.