How to manipulate specific div inside a for-loop of EJS?-CodePudding

Been googling around for multiple hours, I want to change the color of the svg of one element during the onClick event, turns out it either style all the elements in the for loop, or just the first one. I added my ejs and toggleSvg() js script here. Hope you can help me.

ejs snippet: (look for "svg here")

<div >
          <% posts.forEach(post=> { %>
            <div >
                <div >
                    <div >
                        <div >
                            <img
                            src="<%= post.merchant.image %>"
                            alt="..."
                            
                            loading="lazy"
                                />
                        </div>
                        
                        <p ><%= post.merchant.name %></p>
                    </div>
                    <div>
<!--svg here!-->
                            <svg id="test" xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 24 24" stroke="currentColor" onclick="toggleSvg()" >
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
                              </svg>
                    </div>
                </div>
                <!--image carousell-->
                <div >
                    <div >
                        <div >
                            <div >
                                <img
                                src="<%= post.imageUrl[0] %>"
                                alt="..."
                                
                                loading="lazy"
                              />
                            </div>
                        </div>
                        <div >
                            <div >
                                <img
                                src="<%= post.imageUrl[1] %>"
                                alt="..."
                                
                                loading="lazy"
                              />
                            </div>
                        </div>
                        <div >
                            <div >
                                <img
                                src="<%= post.imageUrl[2] %>"
                                alt="..."
                                
                                loading="lazy"
                              />
                            </div>
                        </div>
                        <div >
                            <div >
                                <img
                                src="<%= post.imageUrl[3] %>"
                                alt="..."
                                
                                loading="lazy"
                              />
                            </div>
                        </div>
                    </div>
                    <div ></div>
                    <div ></div>
                    <div ></div>
                </div>
                
                <div >
                    <p><span ><%= post.merchant.name %></span><%= post.description %></p>
                </div>
              </div>
          <% }) %>
      </div>`enter code here`

toggleSvg() js:

<script>
        function toggleSvg() {
            svgElem = document.getElementById("test");
            if(svgElem.style.fill === 'red'){
                svgElem.style.fill = 'none';
            }else{
                svgElem.style.fill = 'red';
            }
        }
</script>

CodePudding user response：

you're using a id in a loop the can only select one element, if you want to color all svg you can use a class, if you want to color a specific svg you can do it like this

onclick="toggleSvg(this)"

this way you pass the current element when you click

<script>
        function toggleSvg(svgElem ) {
            if(svgElem.style.fill === 'red'){
                svgElem.style.fill = 'none';
            }else{
                svgElem.style.fill = 'red';
            }
        }
</script>