I created an element in JS to be displayed on the html web page. I am not seeing why the styling is not working properly. Maybe someone would be so kind as to point out any error I may have made. Thank you.
///HTML
<!DOCTYPE html>
<html>
<head>
<title>WEB 115 Final Project</title>
</head>
<body>
<script src= "projectJS.js"></script>
</body>
</html>
///JS
var elemH1 = document.createElement("h1");
elemH1.style.color = "red";
elemH1.style.fontFamily = "Tahoma";
elemH1.style.textAlign = "center";
document.write("<h1>Kent Butler</h1>");
var elemH2 = document.createElement("h2");
elemH2.style.fontFamily = "Garamond";
elemH2.style.color = "red";
elemH2.style.fontStyle = "italic";
elemH2.style.textAlign = "center";
document.write("<h2>WEB 115.0001</h2>");
I am looking for the text to styled red and with the specified font families, etc. Thank you.
you need to set the text on your elements and then add them to document.body
var elemH1 = document.createElement("h1");
elemH1.style.color = "red";
elemH1.style.fontFamily = "Tahoma";
elemH1.style.textAlign = "center";
elemH1.innerText = "Kent Butler";
document.body.appendChild(elemH1);
//document.write("<h1>Kent Butler</h1>");
var elemH2 = document.createElement("h2");
elemH2.style.fontFamily = "Garamond";
elemH2.style.color = "red";
elemH2.style.fontStyle = "italic";
elemH2.style.textAlign = "center";
//document.write("<h2>WEB 115.0001</h2>");
elemH2.innerText = "WEB 115.0001";
document.body.appendChild(elemH2);
The problem is that you're creating the element and setting it's properties but you're not actually using them. Instead, you are creating a whole new element without any style attached in document.write("<h1>Kent Butler</h1>")
Also, you should consider putting the styling in a CSS file instead of hard coding it with JS.
Related
Javascript createElement() is not working in Chrome but it works in IE and Firefox fine. Why?
It's working perfectly, use this code:
var catDiv = document.createElement("div");
catDiv.innerHTML = "Test";
document.body.appendChild(catDiv);
Another working example (if you have an element with Id = myTableBody in your HTML)
var appendingTo = document.getElementById("myTableBody");
var tr = document.createElement("tr");
tr.setAttribute("name", "i");
appendingTo.appendChild(tr);
var name = document.createElement("Div" );
will work. And later you can add the attributes like
name.colSpan="2";
document.body.appendChild(name);
Note: don't try to use angular brackets like createElement("<div />").
It will not work in Chrome.
Edit: syntax issue in above code fixed. there should be a dot instead of comma.
Beacause your code is messed up, there's nothing wrong with "createElement":
<html>
<head>
<meta charset = "utf-8">
<title></title>
<script>
window.onload = function () {
for (var i = 0; i < 100; i ++) {
var div = document.createElement ("div");
div.style.border = "1px solid black";
div.style.margin = "20px";
div.style.padding = "10px";
document.body.appendChild (div);
}
}
</script>
<style></style>
</head>
<body></body>
</html>
So I also couldn't get createElement() to work in chrome. After reading Caio's post and testing the code provided I figured out what I was doing wrong.
On w3schools.com the examples they provide always use the tag name in all caps ex. createElement("DIV"), which is the way I was using it and with poor results.
After changing from "DIV" to "div" in my own code it instantly worked.
Thanks Caio.
I'm trying to make a main menu for a game. The first frame contains buttons "Start game" and "Quit". The second frame contains buttons "Start", "Back" and a clickable icon for turning the in-game music on or off.
In my onload function I'm adding event listeners to both the "start game" button and the clickable icon. However, it seems, that it only registers the first event listener as when I changed the order the "start game" button stopped working too. What am I doing wrong and am I missing something about handling input with DOM?
window.onload = function (){
document.getElementById("button_play").addEventListener("click", showInstructionPage);
document.getElementById("Link_sound").addEventListener("click", setSound);
}
function setSound(){
if(sound == 1){
document.getElementById("Icon_sound").setAttribute("src", "../media/vypnuty_zvuk.png");
sound = 0;
}
else{
document.getElementById("Icon_sound").setAttribute("src", "../media/zapnuty_zvuk.png");
sound = 1;
}
}
function showInstructionPage(){
//this part is long but works
document.getElementById("button_play").innerHTML = "Start";
document.getElementById("button_play").style.left = "350px";
var quit = document.getElementById("button_quit");
var back = document.createElement("a");
var id = document.createAttribute("id");
id.value = "button_back";
back.setAttributeNode(id);
var link = document.createAttribute("href");
link.value = "#";
back.setAttributeNode(link);
text = document.createTextNode("Back");
back.appendChild(text);
document.getElementById("menu").replaceChild(back, quit);
document.getElementById("button_back").style.left = "346px";
//add instructions and sound icon
var header = document.createElement("h1");
text = document.createTextNode("Instructions");
header.appendChild(text);
document.getElementById("menu").appendChild(header);
var id = document.createAttribute("id");
id.value = "Header_instructions";
header.setAttributeNode(id);
var goal = document.createElement("p");
text = document.createTextNode("Your goal is to get as many frogs to the other side of the river without losing all your lives. To do this, you need to avoid the traffic and alligators.");
goal.appendChild(text);
document.getElementById("menu").appendChild(goal);
var id = document.createAttribute("id");
id.value = "Paragraph_goal";
goal.setAttributeNode(id);
var instructions = document.createElement("p");
text = document.createTextNode("Move in any direction using the arrow keys");
instructions.appendChild(text);
document.getElementById("menu").appendChild(instructions);
var id = document.createAttribute("id");
id.value = "Paragraph_instructions";
instructions.setAttributeNode(id);
var soundLink = document.createElement("a");
var link = document.createAttribute("href");
link.value = "#";
soundLink.setAttributeNode(link)
var id = document.createAttribute("id");
id.value = "Link_sound";
soundLink.setAttributeNode(id);
var soundImage = document.createElement("img");
var id = document.createAttribute("id");
id.value = "Icon_sound";
soundImage.setAttributeNode(id);
var source = document.createAttribute("src");
source.value = "../media/zapnuty_zvuk.png";
soundImage.setAttributeNode(source);
soundLink.appendChild(soundImage);
document.getElementById("menu").appendChild(soundLink);
}
<html>
<head>
<meta charset="UTF-8">
<title>FROGGER</title>
<link rel="stylesheet" href="../css/styles.css" type="text/css">
<script type="text/javascript" src="../js/main.js"></script>
</head>
<body>
<div id="wrapper">
<div id="menu">
<img id="game_title" src="../media/title.png">
Start game
Quit
</div>
<canvas id="canvas" width="800" height="800"></canvas>
<img src="../media/menu_background.jpg" hidden="true" id="menuBackground">
</div>
</body>
</html>
The issue was, that when I called
document.getElementById("Link_sound").addEventListener("click", setSound);
inside the .onload function it couldn't assign the event listener because at the time of loading the page the clickable image doesn't exit yet, as it is only created using DOM after clicking a button. I solved it by moving the code snipped above to the bottom of the showInstructionPage() function after creating the image element.
I am trying to understand why neither of the commented out scripts work. When I step through the code in the console they are both returning the correct variable values but neither of the commented out code changes the image size. I would think that either one of commented set of scripts would be the correct as opposed to the way that works. If someone could please help me with what I am not understanding it would be greatly appreciated. thanks
<!DOCTYPE html>
<html>
</head>
<body>
<img onmouseover = "increaseSize(this)" id="img2" width="400px" height="400px" src="20191128chichenitza.jpg" title="Chichenitza">
<script>
function increaseSize(y) {
var currWidth = y.clientWidth*1.50;
var currHeight = y.clientHeight*1.50;
y.width = currWidth;
y.height = currHeight;
/*document.getElementById("img2").style.width = currWidth;
document.getElementById("img2").style.height = currHeight;
or
y.style.width = currWidth;
y.style.height = currHeight;
*/
}
</script>
</body>
</html>
The value of .style.width must be set in the same way as you would in CSS. Therefore, y.style.width = currWidth + "px";
I'm writing a firefox plugin which adds a div to the top of the page with various things in it. I can change the content of the div when writing html code directly into the .innerHTML property.... but it looks very messy and it's hard to make changes to the code.
I've read about iframes but it doesn't seem to work, nothing is shown but a vertical line. The object tag isn't working either.
Can someone help me?
My code:
var div = document.createElement('div');
div.id='mainplugindiv';
div.style.width = '100%';
div.style.height = '150px';
div.style.background = '#313192';
div.style.color = 'white';
div.innerHTML = "<iframe src=\"test.html\"></iframe>"; //not working
first we need to create a div and then create iframe object.then you can append iframe into created div and then append created div into Html body.
here it is,
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var newDiv, iframe;
newDiv = document.createElement("div");
iframe = document.createElement("IFRAME");
iframe.setAttribute("src", "http://en.wikipedia.org");;
$(iframe).appendTo($(newDiv));
$(newDiv).appendTo($('body'));
});
</script>
<body>
<p>testing
</p>
</body>
</html>
You could use Jquery for this.
The code below will load all the content from the htmlSheet.html into your div element.
$.get("path/path/htmlSheet.html", function (htmlSheet) {
$("#mainplugindiv").html(htmlSheet);
...
}
HTML after executing the code above:
<div id="mainplugindiv">
//here will be the content of htmlSheet.html
</div>
In your actual code you are just creating a div, but not appending it to the page.
You can use document.body.appendChild(div) to append it to the body:
var div = document.createElement('div');
div.id='mainplugindiv';
div.style.width = '100%';
div.style.height = '150px';
div.style.background = '#313192';
div.style.color = 'white';
div.innerHTML = "<iframe src=\"test.html\"></iframe>";
document.body.appendChild(div);
EDIT:
The actual code works fine, I even tested it in Firefox and it gives the same result, if this is not your problem then maybe you need to be more specific with the result you are getting.
You need to append element with html to show on web page.
Add HTML
<div id="div1">
</div>
And Update your Javascript
var div = document.createElement('div');
div.id='mainplugindiv';
div.style.width = '100%';
div.style.height = '150px';
div.style.background = '#313192';
div.style.color = 'white';
div.innerHTML = "<iframe src=\"test.html\"><p>test</p></iframe>"; //not working
var element = document.getElementById("div1");
element.appendChild(div);
I'm currently learning JavaScript, but I'm very weak on the fundamentals. I'm trying to write a function that changes the background color when a link is clicked, can you please advise me on what I'm doing wrong?
<head>
<script type="text/javascript">
function change()
{
var abra = document.getElementbyId("body").style;
abra.background-color = "black";
}
</script>
</head>
<body>
<div id="body" style="background-color: red;">
Test
sdfdsfsdfds
</div>
</body>
EDIT: For clarification, I was trying to change the background color of the DIV "body".
The property you're looking for is backgroundColor:
abra.backgroundColor = "black";
In general, Javascript uses the corresponding camelCase for CSS style properties. See a list of some properties for examples.
Instead of
var abra = document.getElementbyId("body").style
abra.background-color = "black";
try
document.body.style.backgroundColor = "black";
document.getElementbyId("body")
looks for an element with ID body, and
abra.background-color
is the same as
(abra.background) - color
which will probably result in an error telling you there is no var named color.
use camelCase:
background-color => backgroundColor
var abra = document.getElementById("body").style;
abra.backgroundColor = "black";
But if you want the body tag use:
document.getElementsByTagName("body")[0]
or
document.body // recommended