page will not load external js file with simple code - why? - javascript

I have index.html file with code:
<DOCUMENT!>
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js\script.js"></script>
<link rel="stylesheet" type="text/css" href="css\style.css"></link>
<title> mchy i porosty </title>
</head>
<body>
<p id="demo"></p>
</body>
</html>
In the same folder I have folder "js" with file script.js inside. The code inside this file is:
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = "text";
When I open file index.html in Firefox I see blank page.
When I put code from script.js into index.html using script markup and open index.html in Firefox I see list of cars.
Can someone explain me, what did I do wrong?

Looks like you have a syntax error in your javascript path (and your css).
<script type="text/javascript" src="js\script.js"></script>
<link rel="stylesheet" type="text/css" href="css\style.css"></link>
Should be:
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"></link>
You also need to load or fire your function. You can do this with a simple window.onload. What you currently have will only output "text" in your html, so remove the "" from "text" in your function.
window.onload = function(){
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
}
Alternatively, you can load your function in your body tags with <body onLoad="foo();"> and updating the function from window.onload = function() to function foo().

Related

Navigating to specific URL only IF specified ID withing that URL exists

So I have this HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Background</title>
</head>
<body>
<button id="btn" target="_blank" >CLICK ME</button>
</body>
<script src="js/script.js"></script>
</html>
and this JS code
document.getElementById("btn").onclick = function () {
var test=makeid();
window.open("http://www."+test,'_blank');
};
function makeid()
{
var url = "";
var possible = "abcdefghijklmnopqrstuvwxyz";
for( var i=0; i < 5; i++ )
url += possible.charAt(Math.floor(Math.random() * possible.length));
return url;
}
How to make client jump to this randomly generated URL only if a div(on the page with generated URL) with id="hehe" exists?If it doesn't exist generate URL again.Is it done using AJAX or something else?

Text won't show up using innerText or innerHTML

as the title said and i'm learning javascript and still a beginner.
This the Html file here :
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1 class="menu"></h1>
<script type="text/javascript">
function clr(o){
var a1 = [];
var i = 0;
for (var k in o){
a1[i] = 0;
i++;
}
return a1;
}
console.log(clr({a:"a", b:"b", c:"c"}));
document.getElementsByClassName("menu").innerText = clr({a:"a", b:"b", c:"c"});
</script>
</body>
</html>
Since you are running Jquery you can use Jquery method. like text() or html()
But your problem, is that document.getElementsByClassName("menu") return an HTML Collection so you have to do : document.getElementsByClassName("menu")[0].innerHTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1 class="menu"></h1>
<script type="text/javascript">
function clr(o){
var a1 = [];
var i = 0;
for (var k in o){
a1[i] = 0;
i++;
}
return a1;
}
console.log(clr({a:"a", b:"b", c:"c"}));
$(".menu").text(clr({a:"a", b:"b", c:"c"}));
</script>
</body>
</html>
document.getElementsByClassName("menu") will return an Array-like NodeList of elements that contain the class menu.
Since its an Array-like object, you need to access individual elements using [].
In your case, it will be a an array of 1 element, the h1 element, so to access it you need to grab it at position 0:
document.getElementsByClassName("menu")[0].innerHTML = clr({a:"a", b:"b", c:"c"});
----------------------------------------^
I edited a couple a things. You were close.
I gave the h1 an id. And used document.getElementById.
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1 id="menu"></h1>
<script type="text/javascript">
function clr(o){
var a1 = [];
var i = 0;
for (var k in o){
a1[i] = 0;
i++;
}
return a1;
}
console.log(clr({a:"a", b:"b", c:"c"}));
document.getElementById("menu").innerHTML = clr({a:"a", b:"b", c:"c"});
</script>
</body>
</html>

Google Feed API for RSS is not showing current events

I am attempting to use Google Feed API to display three current event listings for our homepage. This is to circumvent some of the issues we are having with a third part calendar application.
However, with the feed limit set to 3, the only listings that will show up for me are from Jan. 18. Is there a way to make the code show only current or future events?
Thanks in advance for any help.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
</head>
<body>
<div id="feed"></div>
</body>
</html>
JavaScript
google.load("feeds", "1");
var feedcontainer=document.getElementById("feed");
var feedurl="http://25livepub.collegenet.com/calendars/publishers-calendar-7.rss";
var feedlimit = 3;
var rssoutput = '';
function rssfeedsetup(){
var feedpointer=new google.feeds.Feed(feedurl);
feedpointer.setNumEntries(feedlimit) ;
feedpointer.load(displayfeed);
}
function displayfeed(result){
if (!result.error){
var thefeeds=result.feed.entries;
for (var i=0; i<thefeeds.length; i++){
var untrimContent = thefeeds[i].content;
var trimContent = untrimContent.split("<br>", 2);
rssoutput+="<div><a href='" + thefeeds[i].link + "'>" + thefeeds[i].title + "</a></div>" + trimContent;
feedcontainer.innerHTML=rssoutput;
}
} else {
feedcontainer.innerHTML = "Error Loading Events";
}
}
window.onload=function(){
rssfeedsetup();
};

Jquery .get not retrieving file

i have a code that is supposed to read from a html file, split it into an array and display parts of that array, but when going though with alert, i found that $.get is not actually getting the file
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</head>
<body>
<button onclick="myfunction()">update</button>
<div id="div1"></div>
<script>
function myfunction() {
var info = "";
$.get("../Read_Test/text.html", function(data) {
SomeFunction(data);
});
alert(info);
var array = info.split("§n");
var people = array[1].split(",");
for (var i = 0; i < people.length; i++) {
document.getElementById("div1").innerHTML = people[i] + "<br>";
}
}
function SomeFunction(data) {
var info = data;
}
</script>
</body>
</html>
the directories are on a server and go like so:
Sublinks->Read_Test->This_File.html,text.html
The objective of this is that a file would have something along the lines of "a§nb1,b2,b3,§n" and the script would split it via "§n" then get "array[1]" and split that via ",". lastly it displays each part of that newly created array on a new line, so a file with "a§nb1,b2,b3,§n" would result in:
b1
b2
b3
Please help
Ajax is asynchronous, it make request and immediately call the next instruction and not wait for the response from the ajax request. so you will need to process inside of $.get. success event.
I have changed delimiter character to ¥. change same in text.html. problem was you have not mentioned character set to utf8 and due to this it could not recognized the special character and subsequently not able to split the string. i have aldo document type to HTML5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<button onclick="myfunction()">update</button>
<div id="div1"></div>
<script>
function myfunction() {
$.get("../Read_Test/text.html", function(data) {
var info = data;
var array = info.split("¥");
var people = array[1].split(",");
for (var i = 0; i < people.length; i++) {
document.getElementById("div1").innerHTML += people[i] + "<br>";
}
});
}
</script>
</body>
</html>

delete attribute CSS DOM JS

I would like to know what is wrong in my code.
I'd like to delete all "link" tags if there is within the attribute "rel = "stylesheet"
This is my HTML code
<html>
<head>
<title>teset</title>
<meta charset="utf-8" />
<meta name="description" content="test." />
<meta name="author" content="Me" />
<link rel="author" href="www.mysite.uk" />
<link rel="stylesheet" type="text/css" href="www.mysite.uk/css/style.css />
<link rel="stylesheet" type="text/css" href="www.mysite.uk/css/style2.css />
</head>
<script src = "deleteCSS.js"></script>
<body onload="noCSS()">
<p> test !!</p>
</body>
</html>
This is my JS called "deleteCSS.js"
function noCSS(){
//I save tag "link"
var CSSlink = document.getElementsByTagName("link");
var CSSatt = CSSlink.getAttribute("rel");
for (i=0; i < CSSlink.length; i++){
if (CSSatt[i] == "stylesheet"){
CSSlink[i].remove(); }
}
}
with jquery try this
$("link[rel='stylesheet']").remove();
http://jsfiddle.net/7Fcxx/
function noCSS() {
var links = document.getElementsByTagName("link");
for (var i = links.length - 1; i >= 0; --i) {
if (links[i].rel === "stylesheet") {
links[i].parentNode.removeChild(links[i]);
}
}
}
You have to check the rel attribute of each <link> in the loop;
You can remove them in a reversed order (when you remove links[0], links[1] takes the place of it and when you remove links[1] it actually removes the second one of the rest;
Or you can just use while (links.length) instead, and always remove links[0] (the first one of the rest).
If you want a pure JavaScript implementation:
(function() {
var links = document.getElementsByTagName('link');
for(var i=0; i<links.length; i++) {
links[i].getAttribute('rel') === 'stylesheet' && links[i].remove();
}
})();
Copy this to a file no-css.js and put it at the end of your HTML file.
Your code is not working because getElementsByTagName is returning a NodeList, so calling getAttribute('rel') of it will return an error TypeError: Object #<NodeList> has no method 'getAttribute'. So you have to iterate through all the links (nodes) and if they have the rel attribute set to stylesheet, remove them.
Hope this helps!
This is another JavaScript implementation:
function noCSS(){
var CSSlink = document.getElementsByTagName("link");
for (i=0; i < CSSlink.length; i++ )
{
if (CSSlink[i].getAttribute("rel") === "stylesheet")
{
CSSlink[i--].remove();
}
}
}
Make sure you enter the quotation marks at the end of the href tags like
href="www.mysite.uk/css/style.css"

Categories

Resources