Hi All, I've been trying to add a 'Call' button on listing results (10 per page) so a user has to click the 'Call' button before showing the contact no. Problem is the JavaScript code does not like it when used (10 times on same page)? it just shows the top contact no. (listing 1) no matter what call button is clicked on other listings. Any help would be great, i've also tried show / hide using css / div but get the same result. Best Regards
Hi, <input type="button" name="answer" value="Show / Call" onclick="showDiv()" /> <div id="welcomeDiv" style="display:none;" class="answer_list" ><br /><strong>1234 56789 </strong></div> <script> function showDiv() { document.getElementById('welcomeDiv').style.display = "block"; } </script> Code (JavaScript): Best Regards
The first mistake is that you have an id on that div that is presumably repeated for each phone number. IDs need to be unique. Analogy: you're in a room full of people called Brett. Someone asks Brett to step forward - how are they supposed to know which Brett you're after? So instead of calling the div "welcomeDiv" try "welcome123" where 123 is either the database id or the number on that page. Have a play around with this instead <?php $listings = []; $listings[] = ['name' => 'McDonalds', 'id' => 100, 'phone' => '555 1234']; $listings[] = ['name' => 'KFC', 'id' => 101, 'phone' => '555 1235']; $listings[] = ['name' => 'Dominoes', 'id' => 102, 'phone' => '555 1236']; $listings[] = ['name' => 'Pizza Hut', 'id' => 103, 'phone' => '555 1237']; foreach ($listings as $row) { echo "<input type='button' name='answer{$row['id']}' value='Show / Call'>" , "<div id='welcome{$row['id']}' style='display:none;' class='answer_list'><br/>" , "<strong>{$row['phone']}</strong>" , "</div>"; } ?> <script> const btns = document.querySelectorAll('input[name^=answer]'); btns.forEach(btn => { btn.addEventListener('click', event => { var id = event.target.name.substring(6); document.getElementById("welcome" + id).style.display = 'block'; }); }); </script> Code (markup):
Hi SarahK, So in the end with the advice on using different id’s got some code to work - https://uklbd.com/location-england-1.html Thank you! j
phplduser Glad that you got it working, but I don't get the point of hiding phone number like this. The number is already visible in your source code in a hidden div, and any scraper/bot can easily steal it along with other visible listing details. Generally the purpose of having a button like this is to fetch the info from the database using ajax, and display it in the div when the button is clicked. Until then, the hidden info is not visible in the source code of the webpage as well... This is done to protect your data from getting stolen by automated bots. Sometimes done to save screen space, by hiding long articles inside a div, and showing them only when a title link/button is clicked. But in your case, data is already there in source code, and is not large either, so why make the user click a button for no reason?
Our Yellow Pages website did this, I always figured it was so they could log the clicks and track which listings actually got attention.
Your both right, yes I was trying to hide the contact no’s so will have to re-think that and yell I believe do track the clicks when a call button is clicked. thank you both once again. J
Whilst we have a pointlessPosterBump here, it's funny to see a thread about yet another thing that's none of JavaScript's flipping business in action. Also wondering why the devil a phone number would grammatically/structurally receive "more emphasis" <label> <input type="checkbox" class="showHideLastSibling" hidden aria-hidden="true"> <span>Show / Call</span> <span>867 5309</span> </label> Code (markup): Is all the markup needed. .showHideLastSibling { display:block; /* undo accessibility "hidden" for screen media */ } .showHideLastSibling, .showHideLastSibling ~ *:last-child { postion:absolute; /* slide off screen to hide */ left:-999em; } .showHideLastSibling:checked ~ *:last-child { position:static; /* pop it back into place */ } Code (markup): We set it to block so that it's able to be clicked again in all UA's, then hide it off screen along with the show/hide text. In the case of that latter span we do this so that screen readers that (incorrectly) use the screen media sheet, and search engines looking for "content cloaking" do not ignore the text or penalize you in the way display:none; can. Swapping it to position:static when the input is checked makes it ignore any left/right and puts it back into flow. NOT JAVASCRIPT'S FLIPPING JOB! Or at least not since we stopped giving a flying purple fish about IE8/earlier. No dicking around with ID's, no goofy DIV and endless classes for nothing, no outdated outmode onevent rubbish...