html - added href hyperlink to bootstrap carousel but only last two characters of text goes to link- the rest just slides to previous image

Question

I have a bootstrap v5.0 carousel inside a modal that loads 5 news articles from the Bing News API (using PHP and jQuery). The content is added to my index.html through jQuery. Everything loads fine except that my "Read article" link doesn't go to the url of the news article. Looking at the elements tab in the console I see that the correct URLs are added to my anchor tags (and if I click the href link in the console I am taken to the correct news article). However when I hover over "Read article" I see at the bottom left of my browser that the link is pointing to #carouselExampleControls. Hoping someone can help me fix this problem. Thank you.

*I just noticed that actually clicking (roughly about) the 'le' in 'Read article' will take me to the correct link but the rest of 'Read article' takes me to #carouselExampleControls

my HTML:

<!-- News modal -->
  <div class="modal fade" id="newsModal" tabindex="-1" aria-labelledby="newsModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="newsModalLabel">News</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img id="imgArticleZero" src="" class="w-100" alt="News Article Image">
                <div>
                  <h5 id="txtArticleNameZero"></h5>
                  <a id="articleLinkZero" href="">Read article</a>
                </div>
              </div>

              <div class="carousel-item">
                <img id="imgArticleOne" src="" class="w-100" alt="News Article Image">
                <div>
                  <h5 id="txtArticleNameOne"></h5>
                  <a id="articleLinkOne" href="">Read article</a>
                </div>
              </div>

              <div class="carousel-item">
                <img id="imgArticleTwo" src="" class="w-100" alt="News Article Image">
                <div>
                  <h5 id="txtArticleNameTwo"></h5>
                  <a id="articleLinkTwo" href="">Read article</a>
                </div>
              </div>

              <div class="carousel-item">
                <img id="imgArticleThree" src="" class="w-100" alt="News Article Image">
                <div>
                  <h5 id="txtArticleNameThree"></h5>
                  <a id="articleLinkThree" href="">Read article</a>
                </div>
              </div>

              <div class="carousel-item">
                <img id="imgArticleFour" src="" class="w-100" alt="News Article Image">
                <div>
                  <h5 id="txtArticleNameFour"></h5>
                  <a id="articleLinkFour" href="">Read article</a>
                </div>
              </div>

            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </a>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

my jQuery code:

//Bing News Seach Api
            $.ajax({
                url:'assets/php/bingNews.php',
                type: 'GET',
                dataType: 'json',
                data: {
                    bingCountry: countryName
                },
                success: function(result) {
                    
                    console.log('BingNews', result);

                    
                        $('#imgArticleZero').attr("src", result.value[0].image.contentUrl);
                        $('#txtArticleNameZero').text(result.value[0].name);
                        $('#articleLinkZero').attr("href", result.value[0].url);
                        
                        $('#imgArticleOne').attr("src", result.value[1].image.contentUrl);
                        $('#txtArticleNameOne').text(result.value[1].name);
                        $('#articleLinkOne').attr("href", result.value[1].url);
                        
                        $('#imgArticleTwo').attr("src", result.value[2].image.contentUrl);
                        $('#txtArticleNameTwo').text(result.value[2].name);
                        $('#articleLinkTwo').attr("href", result.value[2].url);
                        
                        $('#imgArticleThree').attr("src", result.value[3].image.contentUrl);
                        $('#txtArticleNameThree').text(result.value[3].name);
                        $('#articleLinkThree').attr("href", result.value[3].url);

                        $('#imgArticleFour').attr("src", result.value[4].image.contentUrl);
                        $('#txtArticleNameFour').text(result.value[4].name);
                        $('#articleLinkFour').attr("href", result.value[4].url);
                    
                 },
                
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log('BingNews Error',textStatus, errorThrown);
                }
            });

question from:https://stackoverflow.com/questions/65892721/added-href-hyperlink-to-bootstrap-carousel-but-only-last-two-characters-of-text

Answer 1

Waitting for answers