Linking CSS and Javascript files to a HTML file on a localhost server using XAMPP

Question

I have a JSFiddle here http://jsfiddle.net/yqh2rqh0/25/ and it works perfectly fine. But then I tried to decompose all the styles of code and actually add it to my website, which is www.localhost/home.html and I created a home.html page, where I put:

<html>

<head>

<link type="text/css" href=“homestyle.css" rel="stylesheet" />

<script type="text/javascript”; src=“homejavascript.js”;></script>

</head>

<body>

<input type="button" name="answer" value="post" onclick="openBox()" />

<div id="postBox" style="display:none;">
<center>
    <input type="text" name="post" maxlength="100" />
    <br>
    </br>
    <button style="border : solid 0px #000080; border-radius : 4px; moz-border-radius : 4px; -webkit-box-shadow : 0px 0px 5px rgba(0, 0, 0, 1.0); -moz-box-shadow : 0px 0px 5px rgba(0,0,0,1.0); box-shadow : 0px 0px 5px rgba(0,0,0,1.0); font-size : 24px; font-style : ;color : #ffffff; padding : 4px 10px; background-color : #000080;">post</button>
    <br/>
    <br/>
    <center>
    <table class="rows"></table>
</center>
</center>
</div>

</body>

</html>

And then I have my Javascript (homejavascript.js) file:

var btn = document.getElementsByTagName("button")[0];
var inpt = document.getElementsByName("post")[0];

function openBox() {
   document.getElementById('postBox').style.display = "block";
}

btn.onclick = function () {

    if (!inpt.value) alert("Please enter something to post.");

    var tbl = document.getElementsByTagName("table")[0];
    var row = tbl.insertRow(0);
    var cell = row.insertCell(0);
    var txt = document.createTextNode(inpt.value);
    cell.appendChild(txt);
    tbl.insertRow(0);
    tbl.insertRow(0);

    inpt.value = "";

};

And lastly my homestyle.css file which is the CSS part:

input[type=text] {
    padding:5px;
    border:2px solid #000080;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
input[type=text]:focus {
    border-color:#ccc;
}
-webkit-border-radius: 5px;
 border-radius: 5px;

}
.rows {
    text-align: center;
}

All are in my htdocs folder of XAMPP, but when I go to localhost/home.html, it is a blank page with the proper favicon. Where did I go wrong and what can I do to fix this?

You have a dodgy quote symbol linking your style sheet. That could cause issues. Also, do you get any errors in console (F12 in Chrome)? — webnoob
– webnoob, Commented Jan 14, 2015 at 20:32
@webnoob it says the following in the error console consisting of 2 errors: "localhost/%C3%A2%E2%82%AC%C5%93homestyle.css%22 Failed to load resource: the server responded with a status of 404 (Not Found)" — julian
– julian, Commented Jan 14, 2015 at 20:36

Frederic Yesid Peña Sánchez · Accepted Answer · 2015-01-14 20:38:17Z

2

Change

<link type="text/css" href=“homestyle.css" rel="stylesheet" />

<script type="text/javascript”; src=“homejavascript.js”;></script>

To:

<link type="text/css" href="homestyle.css" rel="stylesheet" />

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

As you have errors on your assets tags...

answered Jan 14, 2015 at 20:38

Frederic Yesid Peña Sánchez

2,69125 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

julian Over a year ago

Thank you so much, it displays everything and the show/hide feature works. But when I type something in the text box then click post, nothing happens. Do you know why? I noticed that on JSFiddle I had to set the framework to "No wrap - in <body>" Also the error code in Chrome is "Uncaught TypeError: Cannot set property 'onclick' of undefined" so it has something to do with onclick in my javascript?

Spencer Wieczorek Over a year ago

@julian Because of the inline onclick="openBox()". When it's set to "On Load" the function isn't yet defined when the DOM is loading. Doing "No wrap - in <body>" places the script in the <body>.

dede · Accepted Answer · 2015-01-14 20:40:10Z

0

<link type="text/css" href=“homestyle.css" rel="stylesheet" />

<script type="text/javascript”; src=“homejavascript.js”;></script>

should be:

<link type="text/css" href="homestyle.css" rel="stylesheet" />

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

Some double quotes were wrong, and there were errors in script tag

answered Jan 14, 2015 at 20:40

dede

2,7332 gold badges30 silver badges35 bronze badges

Collectives™ on Stack Overflow

Linking CSS and Javascript files to a HTML file on a localhost server using XAMPP

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related