How do i make two buttons open a different dialog box

Issue

I want it to work like this:

+-----------+                   +--------------------+
|  button1  |------------------->| I am a dialog box. |
+-----------+                   +--------------------+

+-----------+                                       +-------------+
|  button2  |--------------------------------------->| Hello World |
+-----------+                                       +-------------+

But it ends up like this:

+-----------+                   +--------------------+
|  button1  |------------------->| I am a dialog box. |
+-----------+                   +--------------------+

+-----------+
|  button2  |
+-----------+

<button class="o">How To Make MadLibs in JS</button>

document.addEventListener('DOMContentLoaded', function() {
  var dialog = document.querySelector('dialog');
  if (document.querySelector('.o')) {
    document.querySelector('.o').onclick = function() {
      dialog.show();
    };
  }
  if (document.querySelector('.c')) {
    document.querySelector('.c').onclick = function() {
      dialog.close();
    };
  }
  if (document.querySelector('.p')) {
    document.querySelector('.p').onclick = function() {
      print();
      dialog.close();
    };
  }
});

If you need more code to fix it, it's here: https://lesscodegreater--seamore.repl.co/

I tried using the ai generate one, tried using stack overflow answers, none of it worked, none of it made sense, i'm resorting to asking now.

also, i'm using the dialog TAG, not some other thing, I'm using <dialog>.

Solution

1. You have to distinct the two buttons and two dialogs somehow. Giving them an id field would do the job.

<button class="o" id="dna-btn">How to make DNA ... </button>
<button class="o" id="madlibs-btn">How to make MadLibs ... </button>

2. After that, you have to distinct your two dialogs. Using the id attribute here as well

<dialog id="dna-dialog"> ... </dialog>
<dialog id="madlibs-dialog"> ... </dialog>

3. Modify the js to use the newly created ids

document.addEventListener('DOMContentLoaded', function() {
  const dnaDialog = document.querySelector('#dna-dialog');

  if (document.querySelector('#dna-btn')) {
    document.querySelector('#dna-btn').onclick = function() {
      dnaDialog.show();
    };
  }

  if (document.querySelector('.c')) {
    document.querySelector('.c').onclick = function() {
      dnaDialog.close();
    };
  }

  if (document.querySelector('.p')) {
    document.querySelector('.p').onclick = function() {
      print();
      dnaDialog.close();
    };
  }

  const madlibsDialog = document.querySelector('#madlibs-dialog');

  if (document.querySelector('#madlibs-btn')) {
    document.querySelector('#madlibs-btn').onclick = function() {
      madlibsDialog.show();
    };
  }
});

Optional

Also it would reduce the javascript code if you used onclick attributes on the buttons.

<button class="o" onclick="dna.show()" >How to make DNA ... </button>
<button class="o" onclick="madlibs.show()">How to make MadLibs ... </button>
...
<dialog id="dna-dialog"> ... </dialog>
<dialog id="madlibs-dialog"> ... </dialog>

const dna = document.getElementById('dna-dialog');
const madlibs = document.getElementById('madlibs-dialog');

Answered By - captainbread