Okay So this is the code. When I run it. It just has the h1 tag and 3 subparts. It doesn't take value from getElementByID function and assigns it to respective id.
<!Doctype html>
<html>
<head>
<title>My Playlsit</title>
<meta charset="utf-8">
<script>
function addsongs() {
var song1 = document.getElementById('song1');
var song2 = document.getElementById('song2');
var song3 = document.getElementById('song3');
song1.innerHTML = "Blue Suede Strings, By Elvis Pagely";
song2.innerHTML = "Great Objects on Fire, by Jerry JSON Lewis";
song3.innerHTML = "I code the Line,by Johnny Javascripts"
}
window.onload = "addsongs";
</script>
</head>
<body>
<h1>My awesome Playlist</h1>
<ul id="playlist">
<li id = "song1"</li>
<li id= "song2"</li>
<li id = "song3"</li>
</ul>
</body>
</html>
You have missed the > symbol of starting li element.
Also function cannot be assigned as string value. Remove the quotes.
window.onload = addsongs;
Related
I have a function that returns some HTML fragment that I store in a variable called data, with its whole structure. What I want is to extract from it some of those parts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script id="hello">
</script>
</head>
<body>
</body>
</html>
For example, I want to get the body and save it in a new variable:
var body = data.split("<body")[1].split(">").slice(1).join(">").split("</body>")[0];
Where data is the HTML text as a string that the original function is returning.
Is there any way I could save an specific script, from its ID (in this case with id = hello), and save it in another variable??
Thank you very much
var newVar = $("#hello").html();
Let's suppose you have an HTML string in a variable, for example
var foo = '<body><span>bar</span></body>';
Now, let's initialize a parser, to convert this into HTML:
var parser = new DOMParser();
var doc = parser.parseFromString(foo, "text/html");
Now, you can read anything from foo, as it is converted into HTML:
document.getElementsByTagName("body")[0].innerHTML = doc.querySelectorAll("body")[0].innerHTML;
$html = document.querySelector("body").innerHTML;
$hello = document.getElementById("hello").innerHTML;
console.log($html);
console.log($hello);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script id="hello">
// script data
</script>
</head>
<body>
</body>
</html>
How to to show "New Way" in h1, and "To do that way" in h2? My Output: "To do that way" in h1 and "The Good Way" in h2 is not expected.
function init() {
var planet = document.getElementById("greenplanet");
planet.innerHTML="New Way";
document.getElementById("hard");
planet.innerHTML="To do that way"
}
window.onload=init;
<h1 id="greenplanet">The Great Planet</h1>
<h2 id="hard">The Good way</h2>
you are adding 'New Way' in #greenplanet and then replacing it with 'To do that way', you need to add it to #hard. you can do something like this:
function init() {
var planet = document.getElementById("greenplanet");
planet.innerHTML="New Way";;
document.getElementById("hard").innerHTML="To do that way"
}
window.onload=init;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1 id="greenplanet">The Great Planet</h1>
<h2 id="hard">The Good way</h2>
</body>
</html>
You didn't reassign planet var in 3rd line of your function.
BTW you don't inject HTML so change element.innerHTML to element.innerText or element.textContent
// correct your init() as below :
function init() {
var planet = document.getElementById("greenplanet");
planet.innerHTML="New Way";
var planet1 = document.getElementById("hard");
planet1.innerHTML="To do that way"
}
You should reassign new div with "hard" id to planet variable in order to make your code work
function init() {
var planet = document.getElementById("greenplanet");
planet.innerHTML="New Way";
planet = document.getElementById("hard");
planet.innerHTML="To do that way"
}
window.onload=init;
<h1 id="greenplanet">The Great Planet</h1>
<h2 id="hard">The Good way</h2>
Other answers on this site regarding my question haven't helped. Hoping to get another view.
I have received this message: "combine this with previous var statement. var changeText = paragraph[1].style.fontStyle = "italic";"
I am following a tutorial on YouTube and my code matches up with the guy's code on the video. I have had to add "user strict"; because I was instructed by JSLint. But everything else is the same.
Why is this code not working?
Here is my HTML:
function changeStyle() {
"use strict";
var paragraph = document.getElementsByTagName("p");
var changeText = paragraph[1].style.fontStyle = "italic";
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JS Tutorials-2</title>
<meta name="js tutorials-2" content="js tutorials-2">
<link rel="stylesheet" href="js-tutorials-2.css">
</head>
<body>
<header>
<div class="banner"><h1 id="head">Javascript</h1></div>
<div class="banner2"><h1 id ="another-head">The Adventure Begins</h1></div>
</header>
<p id = "para2">Text Goes Here </p>
<p id = "para3">Text Goes Here</p>
<p id = "para4">Text Goes Here </p>
<p id = "para5">Text Goes Here</p>
<button onclick = "changeStyle()">Submit</button>
</body>
I suspect that the suggestion is to have just one var declaration for both paragraph and changeText:
var paragraph = document.getElementsByTagName("p"),
changeText = paragraph[1].style.fontStyle = "italic";
Now, in addition to that, it's not really clear what you're doing with that changeText variable anyway; its value will always be the string "italic". If your function really does contain only those two lines, then what you really want is probably:
var paragraph = document.getElementsByTagName("p");
paragraph[1].style.fontStyle = "italic";
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<script>
function onetwothree() {
var girl = ["Ariana Grande", "Melanie Iglesias", "Kate Upton", "Vanessa Hudgens", "Miley Cyrus", "Jennifer Aniston", "Hannah Montana"];
for (i = 0; i < girl.length; i++) {
var girlOfDay = girl[i];
var id = "w" + i;
var li = getElementById(id);
li.innerHTML = girlOfDay;
}
}
window.onload = onetwothree;
</script>
</head>
<body>
<ul>
<li id="w0"></li>
<li id="w1"></li>
<li id="w2"></li>
<li id="w3"></li>
<li id="w4"></li>
<li id="w5"></li>
<li id="w6"></li>
</ul>
</body>
</html>
Why isnt this working its only displaying the bullet points and not the names? Im new to this i did an example like this in a a book, it worked then i tried to come up with my own and its not working
This line:
var li=getElementById(id);
Should say this:
var li=document.getElementById(id);
When troubleshooting problems like this, always use the JavaScript console available in the development tools of all modern browsers. For example, with your original code, Chrome reports the following error:
Uncaught ReferenceError: getElementById is not defined [test.html:13]
You had 2 problems:
getElementById is not the correct way to call, document.getElementById is correct
you weren't actually calling your function window.onload=onetwothree; does not work, window.onload=onetwothree(); does work
working fiddle: http://jsfiddle.net/den23/
I am somewhat new to programming and have been working through the Head First HTML5 Programming book. On page 65, they have an exercise that helps you insert a javascript function into the HTML head that will change the text located at bullet points in the body of the page. When I open the HTML file in the browser, the page loads, but the content from the Javascript function isn't added to the bullet points. I have determined it's because the script is running before the DOM is complete because when I change the book's code to <body onload="addSongs()">, the page loads correctly.
Here's the code from the book (that doesn't seem to work):
<!doctype html>
<html>
<head>
<title>My Playlist</title>
<meta charset="utf-8">
<script>
function addSongs() {
var song1 = document.getElementById("song1");
var song2 = document.getElementById("song2");
var song3 = document.getElementById("song3");
song1.innerHTML = "Blue Suede Strings, by Elvis Pagely";
song2.innerHTML = "Great Objects on Fire, by Jerry JSON Lewis";
song3.innerHTML = "I Code the Line, by Johnny Javascript";
window.onload = addSongs;
}
</script>
</head>
<body>
<h1> My Awesome Playlist! </h1>
<ul id="playlist">
<li id="song1"></li>
<li id="song2"></li>
<li id="song3"></li>
</ul>
</body>
</html>
I have read through different posts and many people suggested using JQuery (which I'm hoping to learn in the next few months), but I'm just curious as to whether the window.onload = function; has been deprecated since this book was published or if I am making a mistake somewhere. A lot of the exercises in this book use this principle and I can't move forward until I figure this out. Any suggestions or different approaches are appreciated.
Thanks!
You need to move the line:
window.onload = addSongs;
To outside the function.
"I have determined it's because the script is running before the DOM is complete"
The script is running, but all it does is declare a function, it doesn't ever call it (because the aforementioned line is in the wrong place).
it's just a typo.
you put window.onload = addSong; in the definition of the function addSong. so window.onload will never be set, as addSong will never be called.
function addSongs() {
var song1 = document.getElementById("song1");
var song2 = document.getElementById("song2");
var song3 = document.getElementById("song3");
song1.innerHTML = "Blue Suede Strings, by Elvis Pagely";
song2.innerHTML = "Great Objects on Fire, by Jerry JSON Lewis";
song3.innerHTML = "I Code the Line, by Johnny Javascript";
}
window.onload = addSongs; //move this line out of function definition.
You need to move window.onload = addSongs; after define the function, not before it.
like this:
<!doctype html>
<html>
<head>
<title>My Playlist</title>
<meta charset="utf-8">
<script>
function addSongs() {
var song1 = document.getElementById("song1");
var song2 = document.getElementById("song2");
var song3 = document.getElementById("song3");
song1.innerHTML = "Blue Suede Strings, by Elvis Pagely";
song2.innerHTML = "Great Objects on Fire, by Jerry JSON Lewis";
song3.innerHTML = "I Code the Line, by Johnny Javascript";
}
window.onload = addSongs;
</script>
</head>
<body>
<h1> My Awesome Playlist! </h1>
<ul id="playlist">
<li id="song1"></li>
<li id="song2"></li>
<li id="song3"></li>
</ul>
</body>
</html>