The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> JavaScript On Click Runs On Page Load
FrostTaco
post May 1 2016, 07:06 PM
Post #1


Member
***

Group: Members
Posts: 47
Joined: 26-April 16
Member No.: 24,193



Hi guys, so I have some code which runs not only on click, but also on page load, which it really should not do. Here is the code
CODE
<script>
                    document.getElementById('crefer').onclick = function() {
                        var rlink = prompt("Your referal link is http://corndog.corticalcafe.com/?", "ABCYXZ");
                        if(rlink != null){
                            <?php
                                $steam64 = str_replace("http://steamcommunity.com/openid/id", "", $_SESSION['FrostyTaco']);
                                $_SESSION['steam_name'] = $content['response']['players'][0]['personaname'];
                                $name = $_SESSION['steam_name'];
                                $referbuffer = fopen("cache/refer.json", "w+");
                                $rlink = "";
                                $arr = array("$name" => "$rlink");
                                fwrite($referbuffer, json_encode($arr));
                                fclose($referbuffer);
                            ?>
                        }
                    }
                </script>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 2 2016, 06:31 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



That shouldn't happen in the code example. Could you post a complete (but minimal) test page?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 7 2016, 11:27 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



The test page should not contain any raw PHP code, only the rendered content.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
FrostTaco
post May 7 2016, 08:32 PM
Post #4


Member
***

Group: Members
Posts: 47
Joined: 26-April 16
Member No.: 24,193



QUOTE(Christian J @ May 7 2016, 12:27 PM) *

The test page should not contain any raw PHP code, only the rendered content.

So you mean I take the source from "page source" and put that as the test page?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 7 2016, 09:59 PM
Post #5


šŸŒŸComputer says nošŸŒŸ
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6




Yeah, View Source, so you get the rendered output if you are going to paste it in here. If you link to the live page PHP is fine.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
FrostTaco
post May 8 2016, 05:38 PM
Post #6


Member
***

Group: Members
Posts: 47
Joined: 26-April 16
Member No.: 24,193



QUOTE(pandy @ May 7 2016, 10:59 PM) *

Yeah, View Source, so you get the rendered output if you are going to paste it in here. If you link to the live page PHP is fine.

Sadly, the way its setup, unless you wanna change the code, you have to login through steam to view the page, but heres the rendered output:
CODE

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FrostyCSGO</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/mobile.css">
    <script src="js/mobile.js" type="text/javascript"></script>
    <style type="text/css">
    .zoomin input {
        border-radius: 10px;
        border: 2px solid gray;
        height: 100px;
        width: 100px;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        transition: all 1s ease;
    } .zoomin input:hover { width: 150px; height: 150px; }
    .zoomin {
        height: 120px;
        display: inline;
    }

    .bhtml {
        border-radius: 10px;
        border: 2px solid gray;
        color: red;
        background-color: orange;
        width: 10%;
    }

    .rpic {
        border-radius: 17px;
        border: 2px solid gray;
    }

    </style>
</head>
<body>
    <div id="page">
        <div id="header">
            <div>
                <a href="index.php" class="logo"><img src="images/frosty/frostycsgo.png" alt=""></a>
                <ul id="navigation">
                    <li>
                        <a href="index.php">Home</a>
                    </li>
                    <li>
                        <a href="contact.php">Contact</a>
                    </li>
                    <a href='http://steamcommunity.com/id/FrostTaco/'><img src='https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/81/81559b38e6592c6fe06d6d9a15a20e6225332a2c_medium.jpg' class='rpic'></a><a href='MyAccount.php' class='bhtml'>FrostTaco3</a><div id="login"><a href="?logout">Logout</a></div>                </ul>
            </div>
        </div>
        <div id="body" class="home">
            <div class="header" align="center">
                <p class='bhtml' id='cemail'>ā™ Change/Edit Emailā™ : </p><p>sup</p><p class='bhtml' id='ctrade'>ā™ Change/Edit TradeLinkā™ : <a href='http://steamcommunity.com/id/show/tradeoffers/privacy' target='_blank'>(Find your TradeLink Here)</a>:</p><p></p><p class='bhtml' id='crefer'>ā™ Refer A Friend(IN TESTING)ā™ : </p> <p></p>                <script>
                    document.getElementById('crefer').onclick = function() {
                        var rlink = prompt("Your referal link is http://corndog.corticalcafe.com/?", "ABCYXZ");
                        if(rlink != null){
                                                    }
                    }
                </script>
            </div>
            <div class="body">
                <div align="center"><p>Site owned by FrostTaco3</p></div>
            </div>
            <div class="footer">
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            </div>
        </div>
        <div id="footer">
            <div align="center">
                <p>FrostyCS:GO</p>
                <a href="http://steampowered.com">Powered by Steam</a>
            </div>
        </div>
    </div>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 8 2016, 07:53 PM
Post #7


šŸŒŸComputer says nošŸŒŸ
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Doesn't run on page load.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 8 2016, 08:20 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



There's another script at js/mobile.js that may or may not interfere.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
FrostTaco
post May 9 2016, 04:00 PM
Post #9


Member
***

Group: Members
Posts: 47
Joined: 26-April 16
Member No.: 24,193



QUOTE(Christian J @ May 8 2016, 09:20 PM) *

There's another script at js/mobile.js that may or may not interfere.


CODE
window.onload = function(){
    var getNavi = document.getElementById('navigation');

    var mobile = document.createElement("span");
    mobile.setAttribute("id","mobile-navigation");
    getNavi.parentNode.insertBefore(mobile,getNavi);

    document.getElementById('mobile-navigation').onclick = function(){
        var a = getNavi.getAttribute('style');
        if(a){
            getNavi.removeAttribute('style');
            document.getElementById('mobile-navigation').style.backgroundImage='url(images/mobile/mobile-menu.png)';
        } else {
            getNavi.style.display='block';
            document.getElementById('mobile-navigation').style.backgroundImage='url(images/mobile/mobile-close.png)';
        }
    };
    var getElm = getNavi.getElementsByTagName("LI");
    for(var i=0;i<getElm.length;i++){
        if(getElm[i].children.length>1){
            var smenu = document.createElement("span");
            smenu.setAttribute("class","mobile-submenu");
            smenu.setAttribute("OnClick","submenu("+i+")");
            getElm[i].appendChild(smenu);
        };
    };
    submenu = function (i){
        var sub = getElm[i].children[1];
        var b = sub.getAttribute('style');
        if(b){
            sub.removeAttribute('style');
            getElm[i].lastChild.style.backgroundImage='url(images/mobile/mobile-expand.png)';
            getElm[i].lastChild.style.backgroundColor='rgba(121, 101, 102, 0.91)';
        } else {
            sub.style.display='block';
            getElm[i].lastChild.style.backgroundImage='url(images/mobile/mobile-collapse.png)';
            getElm[i].lastChild.style.backgroundColor='rgba(204, 60, 104, 0.91)';
        }
    };
};


Runs on page load for me?(Using chrome)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 9 2016, 07:16 PM
Post #10


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(FrostTaco @ May 9 2016, 11:00 PM) *

Runs on page load for me?(Using chrome)

Yes that script alone should run, due to its onload event.

What exactly does happen on page load that you don't want? Does the prompt box open? That shouldn't happen, not even with the mobile.js script.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
FrostTaco
post May 9 2016, 08:53 PM
Post #11


Member
***

Group: Members
Posts: 47
Joined: 26-April 16
Member No.: 24,193



QUOTE(Christian J @ May 9 2016, 08:16 PM) *

QUOTE(FrostTaco @ May 9 2016, 11:00 PM) *

Runs on page load for me?(Using chrome)

Yes that script alone should run, due to its onload event.

What exactly does happen on page load that you don't want? Does the prompt box open? That shouldn't happen, not even with the mobile.js script.

The prompt does not open, however the file refer.json is created with the text: {"FrostTaco3":""}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 10 2016, 06:16 AM
Post #12


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



PHP runs on the server, before any javascript is run in the browser (I didn't pay attention to this before, sorry). So you can't use javascript to determine if PHP code in it should run, because when the browser sees the javascript the server has already run the PHP code (and the PHP engine on the server ignores javascript).

So this is not a javascript issue after all, back to http://forums.htmlhelp.com/index.php?showtopic=43902 happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 09:27 PM