External js script

Question

I am making this chatroom in html/css/php/js so far its alright but it needs alot of work the url is here i have a lot of php in it and some javascript and i would like to know how to link a external js file i thought i did but it is not working i have tried the

<script src="script.js" type="text/javascript">

method but it doesnt seem to be working

here is the code in my js file

var something = document.getElementById('gamerchat');

something.style.cursor = 'pointer';
something.onclick = function() {
window.location = 'http://billischill.ddns.net/gamerchat.php'
};

var something = document.getElementById('Techroom');

something.style.cursor = 'pointer';
something.onclick = function() {
window.location = 'http://billischill.ddns.net/spygame/spygame.html'
};

and here is my whole page:

<div id="sidebarright">
<div id="defaultchat"class="list"><p>Default Room<p></div>
<div id="gamerchat"class="list"><p>Gamer Chat<p></div>
<div id="Techroom"class="list"><p>Tech Room<p></div>
<ul>

</div>

<script src="script.js" type="text/javascript"></script>
<?
session_start();

if(isset($_GET['logout'])){ 

//Simple exit message
$fp = fopen("log.html", 'a');
fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." has  left the chat session.</i><br></div>");
fclose($fp);

session_destroy();
header("Location: index.php"); //Redirect the user
}

function loginForm(){
echo'
<div id="loginform">
<form action="index.php" method="post">
    <p>Please enter your name to continue:</p>
    <label for="name">Name :</label>
    <input type="text" name="name" id="name" /></br></br>
    <label for="adminpass">Admin?</label>
    <input type="text" name="adminpass" /></br></br>
    <input type="submit" name="enter" id="enter" value="Enter" />
</form>
</div>
';
}

if(isset($_POST['enter'])){
if($_POST['name'] != ""){
    $_SESSION['name'] =    stripslashes(htmlspecialchars($_POST['name']));
}
else{
    echo '<span class="error">Please type in a name</span>';
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chat - BillIsChill Network</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>


<?php
if(!isset($_SESSION['name'])){
loginForm();
}
else{
?>

<div id="wrapper">
<div id="menu">
    <p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?>     </b></p>
    <p class="logout"><a id="exit" href="#">X</a></p>
    <div style="clear:both"></div>
</div>  
<div id="chatbox"><?php
if(file_exists("log.html") && filesize("log.html") > 0){
    $handle = fopen("log.html", "r");
    $contents = fread($handle, filesize("log.html"));
    fclose($handle);

    echo $contents;
}
?></div>

<form name="message" action="">
    <input name="usermsg" type="text" id="usermsg" size="63" />
    <input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
    </form>
    </div>

    <script type="text/javascript"   src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">       </script>
    <script type="text/javascript">
    // jQuery Document
    $(document).ready(function(){
    //If user submits the form
    $("#submitmsg").click(function(){   
    var clientmsg = $("#usermsg").val();
    $.post("post.php", {text: clientmsg});              
    $("#usermsg").attr("value", "");
    return false;
    });

    //Load the file containing the chat log
    function loadLog(){     
    var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
    $.ajax({
        url: "log.html",
        cache: false,
        success: function(html){        
            $("#chatbox").html(html); //Insert chat log into the      #chatbox div              
            var newscrollHeight = $("#chatbox").attr("scrollHeight")    - 20;
            if(newscrollHeight > oldscrollHeight){
                $("#chatbox").animate({ scrollTop: newscrollHeight },   'normal'); //Autoscroll to bottom of div
            }               
        },
        });
        }
        setInterval (loadLog, 2500);    //Reload file every 2.5 seconds

        //If user wants to end session
        $("#exit").click(function(){
        var exit = confirm("Are you sure you want to end the session?");
        if(exit==true){window.location = 'index.php?logout=true';}      
        });
        });



        <?php
        }
        ?>
        </body>

is script.js in the same folder as your php script, if so add a forward slash to script.js . if not "/script.js" is not pointing to a file. Make sure the location of the file in src is correct. — gmfm, Mar 27 '16 at 00:17
It doesn’t look as if you have actually included that script. There’s no `script` element in your page. Also the markup is a mess. You should really make sure that your page is a valid HTML document. — Sebastian Simon, Mar 27 '16 at 00:19
and make sure your JavaScript only runs when everything is loaded, put it in a JQuery `document ready`. The problem is that the element `gamerchat` is not loaded when the Javascript calls it. — Gregory Nikitas, Mar 27 '16 at 00:20
@GregoryNikitas That’s not true. The script is beneath all the relevant HTML elements. — Sebastian Simon, Mar 27 '16 at 00:21
On his other pages "GamerChat" they are not, they are above as this is where he links them with code. The main page has the actual code in it, the other rooms are using the linked file. — Gregory Nikitas, Mar 27 '16 at 00:22
[Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Jonathan Lonowski, Mar 27 '16 at 00:38
Thanks to all of you guys that helped me I got it to work you guys are the best — Nik Hendricks, Mar 27 '16 at 00:50

score 0 · Accepted Answer · answered Mar 27 '16 at 01:02

This should be enough to load the file.

<script src="/path/to/javascript/file.js" type="text/javascript">

However, it has to be fully loaded in order to call any functions in it. just because the page is loaded and rendered does not mean that all other non rendered items are fully loaded. There are a few strategies you could use to test for this.

You could check to see if a function declared in your file is available

function isFunction(fn){
    return typeof fn == 'function'
}

or using jQuery

jQuery.isFunction(YourFunction)

You can also use this

$(document).ready(function(){
    //your stuff here
}

Keep in mind if you've loaded jQuery in "no conflict" mode you'll use jQuery instead of $.

Hope this helps,

Tim

External js script

1 Answers1