1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Trying to use same JavaScript multiple times on same page?

Discussion in 'JavaScript' started by phplduser, Mar 18, 2020.

  1. #1
    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
     
    phplduser, Mar 18, 2020 IP
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #2
    I doubt anyone will help unless they see the code.
     
    qwikad.com, Mar 18, 2020 IP
  3. phplduser

    phplduser Member

    Messages:
    297
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    43
    #3
    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
     
    phplduser, Mar 18, 2020 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #4
    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):
     
    sarahk, Mar 18, 2020 IP
    qwikad.com and phplduser like this.
  5. phplduser

    phplduser Member

    Messages:
    297
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    43
    #5
    Hi Sarahk,

    I see, I will and thank you for your advice and code.

    best regards
     
    phplduser, Mar 19, 2020 IP
  6. phplduser

    phplduser Member

    Messages:
    297
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    43
    #6
    phplduser, Mar 19, 2020 IP
    JEET and qwikad.com like this.
  7. JEET

    JEET Notable Member

    Messages:
    3,825
    Likes Received:
    502
    Best Answers:
    19
    Trophy Points:
    265
    #7
    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?
     
    JEET, Mar 19, 2020 IP
    phplduser likes this.
  8. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #8
    Our Yellow Pages website did this, I always figured it was so they could log the clicks and track which listings actually got attention.
     
    sarahk, Mar 19, 2020 IP
    phplduser and JEET like this.
  9. JEET

    JEET Notable Member

    Messages:
    3,825
    Likes Received:
    502
    Best Answers:
    19
    Trophy Points:
    265
    #9
    sarahk
    Good point about tracking clicks, makes sense.
    But even that is not being done in this case.
     
    JEET, Mar 19, 2020 IP
    phplduser likes this.
  10. phplduser

    phplduser Member

    Messages:
    297
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    43
    #10
    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
     
    phplduser, Mar 20, 2020 IP
    JEET likes this.
  11. Anna Redcliff

    Anna Redcliff Greenhorn

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #11
    Thanks all, my issue resolved too
     
    Anna Redcliff, Oct 20, 2020 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #12
    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...
     
    deathshadow, Oct 21, 2020 IP