how to display a hidden button after document.write('')?

Question

I'm exploring a mixture of codes in javascript, HTML, CSS, and bootstrap. I tried to clear a page through a button click--> document.write(''), then kinda tried to repaint another button. Kindly explain where I've gone wrong, if this is a good practice or not. Sorry, if this is silly. On clicking button one, two things happen: 1) Page is cleared 2) The visibility property of the second button is changed by changing its class name (invoking the new class name's style property)

<style type="text/css">
.bn{visibility:hidden;}
.btn{visibility:visible;}
</style>
<script type="text/javascript">
function newpg(){
            document.write('');
            document.getElementById('two').className="btn";}
</script>
</head><body>
<div class="container">
<div class="row">
<div class="col-md-6">    <!--some content-->
<button id="one" onclick="newpg()">CLEAR &SHOW THE HIDDEN BUTTON</button>
<button class="bn" id="two">I'M HERE</button>
</div></div></div>   <!--bootstrap code inclusion-->
</body></html>

do not use document.write after the page loads. You are removing the content and then you are trying to select the button that is no longer there. — epascarello, Dec 03 '21 at 19:44
You use bootstrap so use the class to show and hide elements. `document.getElementById('one').classList.add('d-none'); document.getElementById('two').classList.remove('d-none');` — epascarello, Dec 03 '21 at 19:49
Speaking of bad practices: Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. The `type` attribute is discouraged. Instead of setting `className`, work with the `classList` API. Whichever JS tutorial you’re reading, there are far [better ones](//developer.mozilla.org/docs/Web/JavaScript/Guide). — Sebastian Simon, Dec 03 '21 at 19:49

epascarello · Answer 1 · 2021-12-03T20:41:12.507

As stated in my comment display none removes all the content of the page. You then try to find a button you just removed. It is not going to work.

You need to hide the element with JavaScript. You can easily do that by setting the display property.

Since you are using bootstrap, you should be toggling their classes. Either you toggle d-none or invisible

const btn1 = document.getElementById('one');
const btn2 = document.getElementById('two');
function newpg(evt) {
  evt.preventDefault();
  btn1.classList.add('d-none');
  btn2.classList.remove('d-none');
}
btn1.addEventListener("click", newpg);

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <!--some content-->
      <button id="one">CLEAR &SHOW THE HIDDEN BUTTON</button>
      <button class="d-none" id="two">I'M HERE</button>
    </div>
  </div>
</div>

Bootstrap 3

const btn1 = document.getElementById('one');
const btn2 = document.getElementById('two');
function newpg(evt) {
  evt.preventDefault();
  btn1.classList.add('hidden');
  btn2.classList.remove('hidden');
}
btn1.addEventListener("click", newpg);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <!--some content-->
      <button id="one">CLEAR &SHOW THE HIDDEN BUTTON</button>
      <button class="hidden" id="two">I'M HERE</button>
    </div>
  </div>
</div>

Thank you, sir. I learnt that d-none comes under the Bootstrap5 version whereas I'm currently learning the 3rd version to strengthen my basics. I'll surely try this when I upgrade myself. — Sowmiya R, Dec 03 '21 at 20:36

score 0 · Answer 2 · answered Dec 03 '21 at 20:03

0

I'm not sure what you are trying to do by clearing the whole page, but it's probably not doing what you think it's doing.

document.write(''); // this indeed clear the whole HTML page
document.getElementById('two') // #two doesn't exist anymore since the page is now blank

Maybe you just want to display/hide elements? Then I would suggest using the CSS display property.

answered Dec 03 '21 at 20:03

E-telier

766
5
15

Yes, I was trying to hide elements and Thanks for your suggestion. – Sowmiya R Dec 03 '21 at 20:38

score 0 · Accepted Answer · answered Dec 03 '21 at 20:08

Using document.write('') you're actually deleting every HTML element on your page, So there remains no element to be shown next. You should use another function to just eliminate the button with id one instead of deleting everything. I suggest document.getElementById('one').style.display="none". So the code would be something like this:

<style type="text/css">
    .bn{visibility:hidden;}
    .btn{visibility:visible;}
</style>
<script type="text/javascript">
    function newpg() {
            document.getElementById('one').style.display="none";
            document.getElementById('two').className="btn";
    }
</script>
</head>
<body>
    <div class="container">
    <div class="row">
    <div class="col-md-6">    <!--some content-->
        <button id="one" onclick="newpg()">
            CLEAR &SHOW THE HIDDEN BUTTON
        </button>
        <button class="bn" id="two">I'M HERE</button>
    </div></div></div>   <!--bootstrap code inclusion-->
</body>

how to display a hidden button after document.write('')?

3 Answers3