Stop using getElementById and target by class to update text content upon input box change

Question

I am trying to update my snippet to:

1 - If the input has a value output the value to span.Permalink before the event listener updates the span tag

2 - Target the span by a class not an ID. I had to add more then one span tag so I can no longer use an ID

I have the snippet working if the span tag has an ID, but now I need to the input value to update all the span tags with a class of .Permalink.

I have tried getElementsByClassName, getElementByClassName and $(.span.Permalink and a few other ways.

window.onload = function() {
  const nameField = document.querySelector('[name="accsc_settings[accsc_get_started_home_page_title]"]');
  nameField.addEventListener('input', function() {
    document.getElementById('Permalink').textContent = this.value.toLowerCase().replace(/ /g, "-");
  })  
};

<div class="home_page_title">
  <input id="nameField" type="text" name="accsc_settings[accsc_get_started_home_page_title]" value="West Coast" data-depend-id="accsc_home_page_title">
</div>

<div>/<span class="Permalink"></span>/about-us/</div>
<div>/<span class="Permalink"></span>/contact/</div>
<div>/<span id="Permalink"></span>/products/</div>

Unsure what your problem is. How are you using getElementsByClassName? — epascarello, Apr 14 '21 at 17:06
https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return — epascarello, Apr 14 '21 at 17:06
Why are you listing this as jQuery, but you are not using jQuery? — epascarello, Apr 14 '21 at 17:07
@epascarello why not be open minded? I am open to discovering ways to to the same thing in different ways. Do you have a better solution using jQuery? — , Apr 15 '21 at 16:49
@epascarello It seems pointless to demonstrate all the ways I have found how using getElementsByClassName did not work. Nonetheless Ryan Wilson helped me understand how to deal with the array aspect of what what getElementsByClassName returns. — , Apr 15 '21 at 16:55
@epascarello that post does not help, but thanks. Understanding what something does is not the same as understanding how to implement it. — , Apr 15 '21 at 16:57
The post is the exact issue you have. You have an htmlCollection, you needed to loop over it. That is what the answers in that post say to do. Sorry you could not apply it to your own code. — epascarello, Apr 15 '21 at 20:30

score 0 · Accepted Answer · answered Apr 14 '21 at 17:16

document.getElementsByClassName worked correctly for me. I just added the Array.from to convert the HTMLCollection to an array so I could use Array.forEach to iterate the collection.

window.onload = function() {
      const nameField = document.querySelector('[name="accsc_settings[accsc_get_started_home_page_title]"]');
      nameField.addEventListener('input', function() {
        const nameFieldVal = this.value;
        //Using Array.from to convert HTMLCollection to Array
        //Array.forEach to iterate each span
        //set the textContent property of each span with className "Permalink"
        Array.from(document.getElementsByClassName('Permalink')).forEach((el) => el.textContent = nameFieldVal.toLowerCase().replace(/ /g, "-"));
      })  
    };

    <div class="home_page_title">
      <input id="nameField" type="text" name="accsc_settings[accsc_get_started_home_page_title]" value="West Coast" data-depend-id="accsc_home_page_title">
    </div>

    <div>/<span class="Permalink"></span>/about-us/</div>
    <div>/<span class="Permalink"></span>/contact/</div>
    <div>/<span class="Permalink"></span>/products/</div>

Thanks, Ryan, I understood that an array is returned, but I could not figure out how to deal with it or if I have to. Learning javascript. I found a way to add the value of the input is it was not blank, before the event listener but simply adding it as html to the span tag, but I was wondering is there is a more eloquent way. — , Apr 15 '21 at 17:01
@JonathanQuePública You're welcome. Please be advised, `document.getElementsByClassName` returns an `HtmlElementCollection`, this is not the same as an array. It has some similarities but it does not expose the methods of Array, that is why I wrap it in `Array.from`. This converts the collection into an array. Then I can use the `Array.forEach` to iterate the elements. A span just contains text or other html elements, so I don't think there is any more elegant solution — Ryan Wilson, Apr 15 '21 at 17:56

Stop using getElementById and target by class to update text content upon input box change

1 Answers1