Changing a span in javascript with several different element IDs

Question

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?

Do you mean that you want to change the text inside the <span> whenever the user changes the selected option in the <select> element? — Emiel Zuurbier
– Emiel Zuurbier, Commented Sep 13, 2022 at 13:57
The combination of PHP and JS together is strongly discouraged. Outside of that, we need your data from the backend (PHP) to give you the best answer. You gave a lot of information which is good for a first question! However, always remember to focus on your problem. — Wimanicesir
– Wimanicesir, Commented Sep 13, 2022 at 13:57
@EmielZuurbier Yes, that's right, that's what I try to do with my code — Moerip
– Moerip, Commented Sep 13, 2022 at 14:01
@Wimanicesir Thanks for your reply. Sorry I wasn't aware that this was not recommended. I did however add some clarification to my question. Is there anything in particular that is not clear to you? — Moerip
– Moerip, Commented Sep 13, 2022 at 14:06
Alright! Out of curiosity, why are you using the ID of the post as the ID of the span? Are you writing this in a post loop or is there another specific reason? Could you also include the HTML of your <select> element? — Emiel Zuurbier
– Emiel Zuurbier, Commented Sep 13, 2022 at 14:06

Emiel Zuurbier · Accepted Answer · 2022-09-13 14:18:22Z

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>

Collectives™ on Stack Overflow

Changing a span in javascript with several different element IDs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related