<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#playerOne{position:absolute;top:500px;left: 500px;border:3px solid green; height: 500px;width:500px; background-color:black}
</style>
</head>
<body>
<div id="main">
<div id="playerOne"></div>
</div>
<script>
var playerOneDiv = document.querySelector("#playerOne");
console.log(playerOneDiv.style.top);
</script>
</body>
</html>
I am not getting anything in my console when I try it like this
I am trying to mimic w3schools example but am having no luck with it, thank you.
http://w3schools-fa.ir/jsref/prop_style_top.html
the issue is window imposing style from style sheet after display rendered. If you grab the window property you would be able to get imposed style properties. Please try by updating your script using following code:
<script>
var playerOneDiv = window.getComputedStyle(document.querySelector("#playerOne")).top;
console.log(playerOneDiv);
</script>
I hope this will help you. Thank you.
Related
I'm practicing the basics from scratch on a new machine and I can't change the text within the header. For some reason it seems the app.js isn't linked up with my index.html file.
This is what i have in the app.js file:
document.getElementsByClassName("title1").innerHTML = 'Testing 123';
Did I link app.js correctly? Is it because I have also linked other js files (bootstrap, jquery and popper)?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Website Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0">
<h1 class = "title1" id="testing11">My First Bootstrap 4 Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
I expected the text within the header to change.
Thanks!
getElementsByClassName returns an array with all specified elements within the document. You can access elements by their index. You can read more about that method from W3Schools.
In your case, you are accessing the first element with that attribute, so that element would be found with an index of 0. You can learn more about indexes and arrays from W3Schools.
document.getElementsByClassName('title1')[0]
I noticed you are using jQuery in your project which enables another method. You can learn more about this from learn.jQuery
$(".title1")[0].innerHTML = 'Testing 123';
I would also suggest you append your javascript to the bottom of the body of your page to minimize above the fold content to have your site load faster. You can learn more about that from Google's Developer Docs.
//app.js
document.getElementsByClassName("title1")[0].innerHTML = 'Testing 123';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Website Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.fakeimg {
height: 200px;
background: #aaaaaa;
}
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom: 0">
<h1 class="title1" id="testing11">My First Bootstrap 4 Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</body>
</html>
getElementsByClassName("title1") returns an array-like object,
use getElementById("testing11") or getElementsByClassName("title1")[0] instead
getElementsByClassName function return an array.
So you need do approach the first element in that array and then you can access to the innerHTML property.
Try this...
document.getElementsByClassName("title1")[0].innerHTML = 'Testing 123';
Or..
Var header = document.getElementsByClassName("title1")[0];
header.innerHTML = 'Testing 123';
Although.. the best solution in this example is to approach to the h1 element by it's I'd that you gave him, and document.getElementById function return single element.
Like so...
document.getElementById('testing11').innerHTML = 'Testing 123';
1st solution: You have to be sure that index.html and app.js are saved in the same folder.
2nd solution: click on F12 and than go to console tab and verify if your html is calling your app.js or if there is any other problem.
The html looks good
You can move the script into end of the body
And check that you use document on ready in your js file
This is a test code. It is suppose to show "How are you doing today? Buddy", but it does not show anything on the page right now and console does not say anything. Anyone knows why?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
function demo() {
let newPara = window.document.createElement("p");
newPara.innerHTML = "<h1>How are you doing today? Buddy</h1>";
document.body.append(newPara);
}
</script>
</head>
<body>
<div onload="demo()">
</div>
</body>
</html>
You can't attach onload event on div.
You can attach it to body element.
I'm using JSBin.com to test this simple code, for fun, but I can't seem to get it to output anything in the "Output" window on the site... is this just a limitation of the site or am I missing something completely obvious?
Here's my HTML-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math.Random</title>
</head>
<body onLoad "findRandom();">
<p id="getRandom"> </p>
</body>
</html>
And my JS-
function findRandom()
{
document.getElementById("getRandom").innerHTML = Math.random();
}
Missing an equal sign maybe
<body onLoad="findRandom();">
this is my html:
<!DOCTYPE html>
<html>
<head>
<title>Free Jokes!</title>
<meta charset="utf-8">
<link href="final%20project.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="left"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#left').load("left.html");
});
</script>
<div id="right"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#right').load("right.html");
});
</script>
</body>
</html>
The html is opening fine, but my left and right html documents aren't showing up. This may be from not correctly typing in the code. Was there anything I did wrong?
Is there any way I can reference my left and right html documents to this without using iframes?
The load function attempts to make an ajax call to the location specified (remember, here in JavaScript we're on the client), so unless you specify absolute URLs, it won't retrieve from the correct location.
Furthermore, assuming that left.html and right.html are complete documents including doctype and <head> etc, that would produce invalid HTML.
Try the following:
<html>
<head>
<title>Free Jokes!</title>
<meta charset="utf-8">
<link href="final%20project.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<iframe id="left" frameborder="0" style="border: 0;" src="left.html"></iframe>
<iframe id="right" frameborder="0" style="border: 0;" src="right.html"></iframe>
</body>
</html>
While it's not perfect, it should at least display the pages correctly.
Hope someone can help me out. I found this nice jQuery plugin to display vector maps in our intranet but I'm not able to create the HTML code to make it work.
http://jvectormap.owl-hollow.net/
I would appreciate your assistance or guidance.
Thank you,
Tony
Probably you forgot to set size of container inside of which you want to place the map. This should work:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="jquery.vector-map.css" type="text/css" media="screen" />
<script src="jquery-1.6.min.js"></script>
<script src="jquery.vector-map.js"></script>
<script src="world-en.js"></script>
<script>
$(function(){
$('#map').vectorMap();
});
</script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
</body>
</html>
I will add width and height parameters in the next version
You must set your map. which name is on top of map.js. Probably you forgot
$('#map').vectorMap({map: 'europe_en'});