console.log('hello test');
//alert("yoyo");
//Variables
//var b = '';
//change the element of html
document.getElementById('someText').innnerHTML = 'Hey there';
I learn the basic javascript tutorial from YouTube Clever Programmer but it seems like my javascript cannot work although I follow 100% exactly the same code as his type.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="someText"></p>
<script src="home.js">
//alert('test');
</script>
</body>
</html>
Typo in innerHTML. document.getElementById('someText').innnerHTML needs to be document.getElementById('someText').innerHTML = 'Hey there';
Related
I Don't khow why my console is telling me that the result is undefined.I am learning DOM and found the problem on my first code which i don't understand
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let head = document.getElementsByClassName(".main");
console.log(head.textContent);
let tail = document.getElementsByTagName("p");
console.log(tail.textContent);
</script>
</head>
<body>
<div class="main">
<p>hello</p>
</div>
</body>
</html>
The elements doesn´t exist when the script runs in head. Move the script to after the elements
Change from .main to main in getElementsByClassName
getElementsByClassName returns a list so add [0] to getElementsByClassName("main") to get the first element
<div class="main">
<p>hello</p>
</div>
<script>
let head = document.getElementsByClassName("main")[0];
console.log(head.textContent);
let tail = document.getElementsByTagName("p")[0];
console.log(tail.textContent);
</script>
Move your script to the body
document.getElementsByClassName returns a collection of HTML elements, not a single element
with document.getElementsByClassName you should pass main, not .main
the textContent of the div with class main is probably not what you expect
to get an single element by its class name or its tag name, you can also use querySelector which is more simple (but slower)
Here is a working version :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="main">
<p>hello</p>
</div>
<script>
let head = document.querySelector(".main");
console.log(head.textContent);
let tail = document.querySelector("p");
console.log(tail.textContent);
</script>
</body>
</html>
This question already has answers here:
How do I change the text of a span element using JavaScript?
(18 answers)
Closed 3 years ago.
i have no idea about this error, because i just checked all of other topics and didn't get result.
let demo = document.getElementById("#demo");
demo.innerText("yo");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pract</title>
</head>
<body>
<script src="javascript.js"></script>
<p id="demo"></p>
</body>
</html>
//currently your id is demo
let demo = document.getElementById("demo");
demo.innerText="yo";
///if your id is #demo use this
let demo2 = document.getElementById("#demo");
demo2.innerText="yolo";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pract</title>
</head>
<body>
<script src="javascript.js"></script>
<p id="demo"></p>
<p id="#demo"></p>
</body>
</html>
As your id is demo, not #demo, you need to write your code like this:
let demo = document.getElementById("demo"); // don't use #
demo.innerText = "yo"; // Also change innerText like this
And for changing innerText property have a look at docs. innerText is not a method.
I am trying to display data randomly in my file 'question.json' on HTML but somehow there's nothing happened. I'm starting to learn JavaScript and still don't know how to fix. Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Answer Something</title>
<script>
$.getJSON('question.json', function(data){
console.log(data)
let questionList = data[Math.floor(Math.random()* data.length)];
let display = document.getElementById('question');
display.innerHTML = questionList;
});
</script>
</head>
<body>
<nav>
Quick Ask
Quick Answers
</nav>
<h1 id="question"></h1>
<div>
<button>Sai/Không/Trái</button>
<button>Đúng/Có/Phải</button>
</div><br>
<div>
<button>Kết quả vote</button>
<button>Câu hỏi khác</button>
</div>
</body>
</html>
Here is the code I am attempting to use and embed in a Google Sites page:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Please follow the link below</title>
<script>
var urls = [
"http://www.kittenwar.com/",
'http://heeeeeeeey.com/',
'http://eelslap.com/',
'http://www.staggeringbeauty.com/',
'http://www.omfgdogs.com/',
'http://burymewithmymoney.com/',
'http://www.fallingfalling.com/',
'http://ducksarethebest.com/',
'http://www.republiquedesmangues.fr/',
'http://www.trypap.com/',
];
function goSomewhere() {
var url = urls[Math.floor(Math.random()*urls.length)];
window.location = url; // redirect
}
</script>
</head>
<body>
</body>
</html>
How do I make this work so that a button will appear in my Google Sites page that will randomly assign you to one of the listed array of links?
By adding a simple button and calling the javascript function. And you need to do some adjustments in your google sites account. You can refer this link to do the changes accordingly in your account.
http://www.thelandscapeoflearning.com/2014/05/did-you-know-google-sites-no-longer.html
AND
https://help.mofuse.com/hc/en-us/articles/226313408-Redirect-Setup-Google-Sites
var urls = [
"http://www.kittenwar.com/",
'http://heeeeeeeey.com/',
'http://eelslap.com/',
'http://www.staggeringbeauty.com/',
'http://www.omfgdogs.com/',
'http://burymewithmymoney.com/',
'http://www.fallingfalling.com/',
'http://ducksarethebest.com/',
'http://www.republiquedesmangues.fr/',
'http://www.trypap.com/',
];
function goSomewhere() {
var url = urls[Math.floor(Math.random() * urls.length)];
window.location = url; // redirect
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Please follow the link below</title>
</head>
<body>
<button onclick="goSomewhere();">Redirect</button>
</body>
</html>
In body
<button onclick="goSomewhere();">Click me</button>
I thought this simple setup would work and use the alternate link to print test.pdf. But in the print preview I see the current page and not test.pdf???
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="alternate" media="print" href="http://localhost/mydomain.com/test/test.pdf">
<script>
window.print();
</script>
</head>
<body>
<div>TODO write content</div>
</body>
</html>
[edit]
the closest I got only seems to work in Chrome (I like to skip the print preview and auto print, but the --kiosk doesn't seem to play along with following code):
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-2.2.0.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function ($) {
function print(url)
{
var _this = this,
iframeId = 'iframeprint',
$iframe = $('iframe#iframeprint');
$iframe.attr('src', url);
$iframe.load(function () {
callPrint(iframeId);
});
}
//initiates print once content has been loaded into iframe
function callPrint(iframeId) {
var PDF = document.getElementById(iframeId);
PDF.focus();
PDF.contentWindow.print();
}
print('http://localhost/mydomain.com/tests/test.pdf');
});
</script>
</head>
<body onload="">
<div>TODO write content</div>
<iframe id="iframeprint" src=""></iframe>
</body>
</html>
You can't do this to a pdf file. But you can do this to an html file.
Something like this:
function print() {
var w = window.open('', 'width=400, height=400');
w.document.body.innerHTML = "HTML";
w.print();
}
<button onclick="print()">Print another file</button>
You can see it here: http://output.jsbin.com/kefoxo
The full code: (Tested on Google Chrome)
http://jsbin.com/kefoxo/edit?html,js