get ul li elements inside other ul li Javascript-CodePudding

I'm having trouble getting elements that are inside other elements. I want to overwrite a text that was already written in my HTML document.

My HTML code:

<div >
   <div >
   <h3 >Industry Experience</h3>
      <article>
           <ul>
              <li>
                  Project FIUBA, Algorithms and Programming I, Argentina, 2021
                  <ul>
                     <li>Project FIUBA, Algorithms and Programming I, Argentina, 2022</li>
                  </ul>
              </li>
            </ul>
      </article>

      <div>
      <input id="edit-aboutme" type="text" oninput="asignar_palabras_2(this.value)" style="display: none;">
      </div>
   </div>
</div>

My Javascript code:


function cambiar_parrafo_2(){
  document.querySelector("input").style.display = "inline";
  let container = document.querySelector(".col-12");
  let texto = container.querySelectorAll("article > ul > li");
  for (let i = 0; i < texto.length; i  ) {
    texto[i].textContent = "";
  }

}

The Javascript code before only delete text into li elements, the function is call when user click an image (I didn't add that piece of code to avoid making it extensive)...

So, after deleting the text, I want to write something new given by the user on input but it doesn't overwrite it.

This is the code that I thought:

function asignar_palabras_2(value) {
  let container = document.querySelector(".col-12");
  let texto = container.querySelectorAll("article > ul > li > ul > li");
  for (let i = 0; i < texto.length; i  ) {
    texto[i].textContent = value;
  }
    
}

Thanks in advance for your answers.

CodePudding user response：

Try with this:

   function asignar_palabras_2(value) {
      let container = document.querySelector(".col-12");
      let texto = container.querySelectorAll("li li");
      for (let i = 0; i < texto.length; i  ) {
        texto[i].textContent = value;
      }
        
    }

Hope this help!

CodePudding user response：

It would be much more helpful to give them useful classnames, so that you can select them directly. eg: outer and inner.

function cambiar_parrafo_2(value) {
  document.querySelector("input").style.display = "inline"
  let container = document.querySelector(".col-12")
  let texto = container.querySelectorAll("article ul.inner li")
  for (let i = 0; i < texto.length; i  ) {
    texto[i].textContent = value
  }
}

cambiar_parrafo_2('sdfsdfds')

<div >
  <div >
    <h3 >Industry Experience</h3>
    <article>
      <ul >
        <li>
          Project FIUBA, Algorithms and Programming I, Argentina, 2021
          <ul >
            <li>Project FIUBA, Algorithms and Programming I, Argentina, 2022</li>
          </ul>
        </li>
      </ul>
    </article>

    <div>
      <input id="edit-aboutme" type="text" oninput="cambiar_parrafo_2(this.value)" style="display: none;">
    </div>
  </div>
</div>