I don't know why the code got no error but isn't displaying the message in JavaScript in the mood function ! It's only displaying the div.
function mood() {
var box = document.getElementById('t');
document.getElementById('t').innerHTML = "Hey <strong>Thanks!</strong>";
}
<div onload="mood()" style="display: block" id="t">HEYYYYY</div>
Add the onload in body instead of div
<!DOCTYPE html>
<html>
<head>
<title>MA page web</title>
<script>
function mood(){
var box = document.getElementById('t');
document.getElementById('t').innerHTML = "Hey <strong>Thanks!</strong>";
}
</script>
</head>
<body onload="mood()">
<div style="display: block" id="t">HEYYYYY</div>
</body>
</html>
var box = document.getElementById('t');
function mood() {
box.innerHTML = "Hey <strong>Thanks!</strong>";
}
window.addEventListener('load', mood)
<!DOCTYPE html>
<html>
<head>
<title>MA page web</title>
<script>
</script>
</head>
<body>
<divstyle="display: block" id="t">HEYYYYY</div>
</body>
</html>
You can use an event listener. This waits until the window is loaded and then runs the function. I hope this helps :)
The onload attribute is only supported on the following HTML tags: <body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> and <style>.
I've adjusted your example below, moving the onload attribute to the body tag in this instance.
function mood() {
var box = document.getElementById('t');
document.getElementById('t').innerHTML = "Hey <strong>Thanks!</strong>";
}
<body onload="mood()">
<div id="t" style="display: block">HEYYYYY</div>
</body>
Related
I wrote javascript codes.
By clicking the button, the child window pops up and displays a text sent from the parent window using a postMessage function.
My code could sent a text to the child window, but there's no text displayed.
The text is displayed only when I keep clicking the button. I don't want the text to disappear.
I think my code is overridden by a blank script or something, though I don't write any other codes except for below.
Do you have any solution for this?
the parent window html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Parent Window</title>
</head>
<body>
<input type="button" value="TEST_BUTTON" id="testButton">
<script>
var testButton = document.getElementById('testButton');
testButton.addEventListener('click', function(event) {
event.preventDefault();
var newWindow = window.open('./child_window.html', 'popupWindow', 'width=400,height=300');
newWindow.postMessage('this is a content from the parent window.', '*');
return false;
},false);
</script>
</body>
</html>
the child window html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Pop Up Window</title>
</head>
<body>
<h1 id="mainText"></h1>
<script type="text/javascript">
var mainText = document.getElementById('mainText');
window.addEventListener('message', function(event) {
console.log(event.data);
this.mainText.innerText = event.data;
}, false)
</script>
</body>
</html>
I ended this up using localStorage instead.
This code runs immediately once the page is loaded. The onclick event is completely ignored by javascript. What is an easy fix for this because like youtube when you play a video the document.title is updated with a speaker. I want to learn to do that with external javascript because I can do it with internal javascript in the html.
<!DOCTYPE html>
<html>
<head>
<title> Animation </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="animationcss.css">
</head>
<body>
<script src="animation.js"></script>
<input id="changeButton" type="button" value="Change" ></input>
/External Javascript/
var element = document.getElementById("changeButton");
element.onclick = textChange("changetothis");
function textChange(text){
document.title = text;
}
try calling the function after the document is loaded by placing the script tag below the object or making $(document).ready() function,
this code works fine with me
<!DOCTYPE html>
<html>
<head>
<title> Animation </title>
<meta charset="UTF-8">
</head>
<body>
<input id="changeButton" type="button" value="Change" ></input>
<script src="script.js"></script>
<body>
</html>
and the script is
var el = document.getElementById("changeButton");
el.onclick = function(){
textChange("changetothis");
}
function textChange(text){
document.title = text;
}
You can achieve your desired effect by using an anonymous function, like so:
document.getElementById("changeButton").onclick = function () {
document.title = newTitle;
}
The variable 'newTitle' should be declared & initalized above this code somewhere in order for it to work.
I need to create a document Object into HTML page using javaScript
to execute a new HTML page into it;
like this :
<!DOCTYPE html>
<html>
<head>
... some head tags appened
<script>
// not problem of with jquery or not
function createDocument(){
var ta = document.getElementById('ta');
var targetElement = document.getElementById('targetElement')
// so i need to know how can use [ta.value]
// to execute it in new DOCUMENT Element appended it in [targetElement]
// without get or set global variables in origin document
}
</script>
</head>
<body>
<textarea id="ta"></textarea>
<div id="targetElement">
<!-- need to append new html document HERE! -->
</div>
<!--
when click the run Button the value of text area can be
running content to create new document object into targetElement
-->
<button onclick="createDocument()">RUN</button>
</body>
</html>
You probably mixed up .getElementById and .createElement
<!DOCTYPE html>
<html>
<head>
<script>
function createDocument(){
var ta = document.getElementById('ta').value;
var targetElement = document.getElementById('targetElement');
targetElement.innerHTML = eval(ta);
}
</script>
</head>
<body>
<textarea onchange="createDocument();" id="ta"></textarea>
<div id="targetElement">
<!-- Content goes here -->
</div>
</body>
</html>
I have the following code that works:
<html>
<head>
<script>
function loaded(){
oFormElement = document.forms['test form'].elements["txtStatus"];
oFormElement.value = "just loaded";
}
</script>
</head>
<body onload="loaded()">
<p>my first socket.io test</p>
<form id = "test form">
<input type="text" id ="txtStatus" value="">
</form>
</body>
</html>
now, if I include the reference to socket.io, it stops working
<html>
<head>
<script src="socket.io/socket.io.js">
<script>
function loaded(){
is this because socket.io handles from elements in it's own way, or is because the browser cannot find socket.io ? Is there any way to debug this/fix this ?
You need to close the first <script> tag...
<html>
<head>
<script src="socket.io/socket.io.js"></script>
<script>
function loaded(){
// ...
html embedded with javascript
<html>
<head>
<title>Example</title>
<script type ="text/javascript">
have I called this function correctly????
function displayatts()
{
document.getElementById("buttonone").onclick = saysomething;
}
is there something wrong here???
function saysomething()
{
alert("I am 28 years old");
}
</script>
<body>
<input type="button" id="buttonone" value="me" >
</body>
</head>
</html>
Here is the full example.
This will work for sure.
Test it if you want.
Copy and paste the below code into W3Schools test environment, "Edit and Click me" to test.
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type ="text/javascript">
function saysomething()
{
alert("I am 29 years old");
}
function displayatts()
{
document.getElementById("buttonone").onclick = saysomething;
}
</script>
<body onload="displayatts();">
<input type="button" id="buttonone" value="me" >
</body>
</head>
</html>
Your script runs before the document is parsed.
Therefore, getElementById returns null.
Move the <script> to the bottom.
"have I called this function correctly????"
You haven't called the displayatts() function at all. Add the following to the end of your script:
window.onload = displayatts;
That way displayatts() will be called automatically once the page finishes loading. It will, in turn, setup the click handler on your button.
Also, include the closing </head> tag just before the opening <body> tag.
Demo: http://jsfiddle.net/nnnnnn/rxDXa/
window.onload = displayatts;
Paste this code before </body> tag in your page.So you can be sure if element is null or not or the code is try to work before your html element is rendered.
Hope this helps your situation..
<script>
var element = document.getElementById("buttonone");
if(element){
element.setAttribute("onclick", "saysomething();");
}else
{
alert("element null, move the code to bottom or check element exists");
}
</script>