Can you figure out what's going wrong here? I assigned each one a separate ID, but it's still not functioning properly in my code. I need to get this fixed for an assignment that's due in a few days, so any help is appreciated!
function readMoreRome() { //function to expand text
var dots = document.getElementById("dots"); //searches for element with ID attribute "dots"
var moreText = document.getElementById("more"); //searches for element with ID "more"
var btnText = document.getElementById("myBtn"); //searches for element with ID "myBtn"
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more"; //changes button text to "Read more"
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less"; //changes button text to "Read less"
moreText.style.display = "inline";
}
}
function readMoreBuda() { //function for expanding text
var dots = document.getElementById("dots2"); //searches for element with ID "dots2"
var moreText = document.getElementById("more2"); //searches for element with ID "more2"
var btnText = document.getElementById("myBtn2"); //searches for element with ID "myBtn2"
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more"; //changes button text to "Read more"
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less"; //changes button text to "Read less"
moreText.style.display = "inline";
}
}<div class="card">
<h2>Visit Budapest</h2>
<div class="info"> <span class="date"><i class="far fa-calendar"></i> November 12, 2019</span> <span class="comment"><i class="far fa-comment-alt"></i> 2 comments</span> </div>
<div class="img"><img src="img/szechenyi.jpg" style="height:200px;"> </div>
<p><i>Széchenyi Thermal Baths </i></p>
<p>
Budapest is the capital city of Hungary. It is best known for its arts and culture. It is a relatively small city, however there are much to see and do.
<span id="dots2">...</span>
<span id="more2">Situated on thermal springs, there are many naturally heated baths to relax in, the Széchenyi baths are the largest with 15 indoor baths and 3 outdoor. There are many spectacular viewpoints in Budapest, great for capturing the views of the city. From 360 panoramic views up at St Stephens Basilica to a wide view of the parliament and the River at Fisherman’s Bastion. Visit the Museum of Fine Arts and enjoy a day amongst famous European art. Classical music lovers will appreciate a performance at the Academy of Music.</span>
</p>
<button onclick="readMoreBuda()" id="myBtn2">Read more</button>
</div>
<br>
<div class="card">
<h2>Visit Barcelona</h2>
<div class="info"> <span class="date"><i class="far fa-calendar"></i> December 06, 2019</span> <span class="comment"><i class="far fa-comment-alt"></i> 5 comments</span> </div>
<div class="img"><img src="img/guell-park.jpg" style="height:200px;"></div>
<p><i>Park Güell </i></p>
<p>
Barcelona, known for its unique culture, art, and architecture. Facing the Mediterranean to the southeast,
<span id="dots3">...</span>
<span id="more3"> the city is one of a kind. When visiting, be sure to explore the spectacular and unique Park Güell, designed by artist Antoni Gaudí. Gaudí's work is admired worldwide for its unique and distinctive style. Other must-see places in Barcelona include La Sagrada Família, a monumental basilica. With beaches, art, and city culture, Barcelona has a lot to offer.</span>
</p>
<button onclick="readMoreBarca()" id="myBtn3">Read more</button>
</div>I'm having some trouble with the buttons here - the first one works fine, but the second one doesn't seem to be responding. I even changed the ID, but it's still giving me issues. It seems to work after clicking it multiple times, which isn't ideal. Can anyone help with this?