CODEWITHSUNDEEP
javascripthtml
Moerip
Moerip

Reputation: 71

Changing a span in javascript with several different element IDs

I'm new to this and don't really know how to ask the question. Forgive me if it's not clear at the outset, but I'll present my code to explain it to you.

On my page I have a drop-down list that displays (a <selector> that has the ID : list-category)

I also have search results that pop up. And at the bottom of his results I would like to display what is selected in the <selector>. For info the get_the_id() function is given by the CMS (WordPress) to display the right image, or the right title. I simply assumed that in order for it to display my text several times, I had to rely on that too.

<div class="listing-cat">
        
        
        <i class="<?php echo $cat_icon; ?>"></i>
        <span id="<?php echo get_the_ID()?>"></span>
        <script type="text/javascript">
            function update() {
                var select = document.getElementById('list-category');
                var option = select.options[select.selectedIndex];

                document.getElementById('<?php echo get_the_ID()?>').innerHTML = option.text;
              
            }            
            update();
         </script>    
      </div>

After several tests I noticed that I only had the selected category displayed for the first search result and not for the others. I thought about it for a while and I said to myself, I'll use the unique ID of the post so that it will be correctly set up (reason why we see this PHP code)

Now nothing is displayed, but if I go into the source code of the web page, I can see that my PHP variables have the right ID of the post, I do not understand why it does not work:

<div class="listing-cat">
                
        <i class=""></i>
        <span id="69678"></span>
        <script type="text/javascript">
            function update() {
                var select = document.getElementById('list-category');
                var option = select.options[select.selectedIndex];

                document.getElementById('69678').innerHTML = option.text;
              
            }            
            update();
         </script>

      </div>

Do you have any leads to help me see what I might have missed? Do I need to make a loop?

Upvotes: 0

Views: 305

Answers (1)

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20944

JavaScript is an event-driven language. That means that when something happens, like a user selects an option in a <select>, an event is fired. We can listen for events to do something whenever they happen.

In this case, the user will change the selected option in the <select> element. Therefor we can listen for the change event

Every HTML Element has a method called addEventListener. With it we add a listener for a specific event that happens on that element and attach a function with what should happen whenever the event occurs.

With every event you get an Event with information about the event, the element that triggered it, and more. The target property of the Event object is a reference to the element that triggered the event, in this case our <select> element.

The selected value of the selected option is reflected in the value property on the <select> element itself. Read it and set your text of your span to the value of the select.

const listCategory = document.querySelector('#list-category');
const selectedCategory = document.querySelector('#selected-category');

listCategory.addEventListener('change', event => {
  selectedCategory.textContent = event.target.value;
});
<select id="list-category">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<div class="listing-cat">
  <i class=""></i>
  <span id="selected-category">A</span>
</div>

Upvotes: 1

Related Questions