how to select one element between multiple elements in javascript-CodePudding

I have 5 inputs and 5 buttons. I have two problems

First, I want only one input to appear when a button is clicked.But with the code I wrote, all inputs appear together
The second thing is that, when each button is clicked, the value inside the button, which is a number here, will be displayed inside the input.

But with the code I wrote, by clicking on each button, the number inside it does not appear in the inptut.

In fact, by clicking on the first button, the number 1 should be displayed inside input 1. By clicking on the second button, the number 2 will be displayed inside input 2. By clicking on the third button, the number 3 will be displayed inside the input 3. and ....

In your opinion, the problem is the way of writing JavaScript codes or html? Can you guide me or show me an example of this?

I would be grateful if you could guide me.

let myButtons = document.querySelectorAll(".myButton");
let myInputs =  document.querySelectorAll(".myInput");
let print = document.querySelectorAll(".myInput > input");
let close = document.querySelectorAll(".close");

myButtons.forEach(function (buttonSelected, id) {
  buttonSelected.addEventListener("click", function() {
    print.value = id   1;
    console.log(id   1);
    for(let j = 0; j < myInputs.length; j    ){
        myInputs[j].classList.add("active");
    }
  })
})

for (let i = 0; i < close.length; i  ) {
    close[i].addEventListener("click", function(){
        this.parentNode.classList.remove("active")
    })
}

.myInput{
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    width: 10%;
    border-radius: var(--borderRadius20);
    background: rgba(221, 199, 0, 0.2);
    -webkit-margin-end: 1rem;
    margin-inline-end: 1rem;
    margin-bottom: 3rem;
    border-radius: 5px;
}

.myInput.active{
    display: flex;
}
  
.myInput > input{
    width:90%;
    border: none;
    margin-right: 0.5rem;
    border-radius: 5px;
}

.myInput > .close{
    border: 1px solid blue;
    border-radius: 5px;
    cursor: pointer;
}

ul{
  display: flex;
  align-items: center;
  border: 1px solid red;
  width: auto;
  margin-top: 1.5rem;
  list-style: none;
}
.myButton{
  padding: 1rem;
  background: yellow;
  border-radius: 10px;
  margin-right: 0.5rem;
  cursor: pointer;
  border: 2px solid green;
}

<!-- //inputs -->
<div>
  <div >
    <input type="text" value>
    <button >close</button>
  </div>
  <div >    
    <input type="text" value>
    <button >close</button>
  </div>
  <div >
    <input type="text" value>
    <button >close</button>
  </div>
  <div >
    <input type="text" value>
    <button >close</button>
  </div>
  <div >
    <input type="text" value>
    <button >close</button>
  </div>
</div>

<!-- //buttons -->
<ul>
    <li>
      <button >1</button>
    </li>
    <li>
      <button >2</button>
    </li>
    <li>
      <button >3</button>
    </li>
    <li>
      <button >4</button>
    </li>
    <li>
      <button >5</button>
    </li>
</ul>

CodePudding user response：

You have some errors in your JS code. Some things to point:

Your variable print is selecting ALL inputs, so it's a nodeList that needs an index. This is why I renamed it to prints and added an id index to it.
Same for your variable close>>closes. I also rewrote that function with forEach in 1 line.
You loop, for no reason, in every click of a button and you add the active class on every input. This is why all inputs are getting displayed on each click. I removed your loop.
Try to use Arrow Functions for more compact and better readable code.

let myButtons = document.querySelectorAll(".myButton");
let myInputs = document.querySelectorAll(".myInput");
let prints = document.querySelectorAll(".myInput > input");
let closes = document.querySelectorAll(".close");

myButtons.forEach((buttonSelected, id) => {
  buttonSelected.addEventListener("click", () => {
    prints[id].value = id   1;
    myInputs[id].classList.add("active");
  })
})

closes.forEach(close => close.addEventListener('click', () => close.parentNode.classList.remove('active')));

.myInput {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  width: 10%;
  border-radius: var(--borderRadius20);
  background: rgba(221, 199, 0, 0.2);
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
  margin-bottom: 3rem;
  border-radius: 5px;
}

.myInput.active {
  display: flex;
}

.myInput>input {
  width: 90%;
  border: none;
  margin-right: 0.5rem;
  border-radius: 5px;
}

.myInput>.close {
  border: 1px solid blue;
  border-radius: 5px;
  cursor: pointer;
}

ul {
  display: flex;
  align-items: center;
  border: 1px solid red;
  width: auto;
  margin-top: 1.5rem;
  list-style: none;
}

.myButton {
  padding: 1rem;
  background: yellow;
  border-radius: 10px;
  margin-right: 0.5rem;
  cursor: pointer;
  border: 2px solid green;
}

<div>
  <div >
    <input type="text" value>
    <button >close</button>
  </div>
  <div >
    <input type="text" value>
    <button >close</button>
  </div>
  <div >
    <input type="text" value>
    <button >close</button>
  </div>
  <div >
    <input type="text" value>
    <button >close</button>
  </div>
  <div >
    <input type="text" value>
    <button >close</button>
  </div>
</div>

<ul>
  <li>
    <button >1</button>
  </li>
  <li>
    <button >2</button>
  </li>
  <li>
    <button >3</button>
  </li>
  <li>
    <button >4</button>
  </li>
  <li>
    <button >5</button>
  </li>
</ul>

CodePudding user response：

little snippet, is it what you wanted?

document.querySelectorAll(".myButton").forEach(function(buttonSelected, id) {
  buttonSelected.addEventListener("click", function(e) {
    const nb = e.target.innerHTML;
    hideAll();
    const el = document.querySelector('.input'   nb);
    el.innerHTML = nb;
    el.classList.add('active');
  })
})


function hideAll() {
  document.querySelectorAll('.myInput').forEach(e => {
    e.classList.remove('active');
    e.innerHTML = '';
  })
}

.myInput {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  width: 10%;
  border-radius: var(--borderRadius20);
  background: rgba(221, 199, 0, 0.2);
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
  margin-bottom: 3rem;
  border-radius: 5px;
}

.myInput.active {
  display: flex;
}

.myInput>input {
  width: 90%;
  border: none;
  margin-right: 0.5rem;
  border-radius: 5px;
}

.myInput>.close {
  border: 1px solid blue;
  border-radius: 5px;
  cursor: pointer;
}

ul {
  display: flex;
  align-items: center;
  border: 1px solid red;
  width: auto;
  margin-top: 1.5rem;
  list-style: none;
}

.myButton {
  padding: 1rem;
  background: yellow;
  border-radius: 10px;
  margin-right: 0.5rem;
  cursor: pointer;
  border: 2px solid green;
}

<!-- //inputs -->
<div>
  <div >
    <input type="text" value>
    <button >close</button>
  </div>
  <div >
    <input type="text" value>
    <button >close</button>
  </div>
  <div >
    <input type="text" value>
    <button >close</button>
  </div>
  <div >
    <input type="text" value>
    <button >close</button>
  </div>
  <div >
    <input type="text" value>
    <button >close</button>
  </div>
</div>

<!-- //buttons -->
<ul>
  <li>
    <button >1</button>
  </li>
  <li>
    <button >2</button>
  </li>
  <li>
    <button >3</button>
  </li>
  <li>
    <button >4</button>
  </li>
  <li>
    <button >5</button>
  </li>
</ul>

CodePudding user response：

for(let j = 0; j < myInputs.length; j    ){
    myInputs[j].classList.add("active");
}

Why loop here?