Using the <input> tag, Two <input type="text"> tags on the same page. Options

[Rayj00]

I admit I am not a seasoned website developer, so have mercy on me!

So, I have two <input type="text"> on the same page.

Here is the first one:

CODE

<input type="text" id="broadcast-id" value="room-xyz" autocorrect=off autocapitalize=off size=20>
<button id="open-or-join">Open or Join Broadcast</button>

And here is the second one:

CODE

<div>
              <h2>Messages</h2>
              <ul></ul>
      </div>
  <form action="">
    <input class="msgs" type="text" id= 'msgs' />
  <button>Send</button>
  </form>

So the first one works fine. But the second one grabs the text from the first one instead of what is typed in it's own text box.

I am using some sample code to add a messaging option in the page from https://www.ably.io/concepts/socketio

Any ideas why the second input is grabbing the first input text?

Thanks, appreciate your response.

Ray

[CharlesEF]

Christian J, The 1st post showed the input with the class 'msgs', which is not 'msg'. The OP changed the HTML when he posted the 2nd example.

This post has been edited by CharlesEF: Jun 2 2020, 12:53 PM

[Rayj00]

Christian J, The 1st post showed the input with the class 'msgs', which is not 'msg'. The OP changed the HTML when he posted the 2nd example.

Like I said, I am very green when it comes to html. If you can, please advise how I use the <input type=text> along with the subsequent document.querySelector.

I will continue to research and experiment in the meantime.

Appreciate it,

Ray