Cannot get hidden element to show using javascript-CodePudding

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 >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 ></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!
}

CodePudding user response：

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 >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>

CodePudding user response：

You are using the same IDs in two different elements, use class instead or use different IDs in different elements:

function show_hidden() {
  document.getElementById("profile_first_name_edit_2").style.visibility = "visible";
  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 >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 ></span></button>
      </span>
    </p>
    <p style="visibility: hidden;" id="profile_first_name_edit_2">
      text to show
    </p>
  </div>
</body>

</html>

From MDN:

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.