Here is the code from the book "HTML 5 + JS for Dummies", looking at it for more than 2 hours and can't find a reason why it doesn't want to work. I'm in very early stage and sorry for my newb question.
<!DOCTYPE html>
<html>
<head>
<title> Outputting data to HTML </title>
<script language ="JavaScript">
{
document.getElementById("myText").
innerHTML ="Clicked!";
}
</script>
</head>
<body>
<h1> Creating HTML Element Output </h1>
<div> <p id="myText">Change Me </p> </div>
<div>
<input id="btnClickMe"
type="button"
value = "Click me"
onlick="WriteText()"/>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> Outputting data to HTML </title>
<script>
function WriteText()
{
document.getElementById("myText").
innerHTML ="Clicked!";
}
</script>
</head>
<body>
<h1> Creating HTML Element Output </h1>
<div> <p id="myText">Change Me </p> </div>
<div>
<input id="btnClickMe"
type="button"
value = "Click me"
onclick="WriteText()"/>
</div>
</body>
</html>
Here's what i did/what was wrong:
You have used wrong syntax for functions or you forgot to use the function keyword
You misspelled onclick (onlick)
I moved the script part out of the head
Use setAttribute method because input filed have not innerHTML property.
`<script language ="JavaScript">
function WriteText()
{
document.getElementById("myText").setAttribute("value", "Clicked!");
}
</script>
</head>
`
Related
I have written a JavaScript alert message code it displays the alert message first in both codes 1 and 2 before Html content. What should I do to run the HTML content first and then a javascript code?
Code 1
<!DOCTYPE html>
<html>
<head>
<title>Hello, World !</title>
</head>
<body>
<h1>I am learning JavaScript.</h1>
<div id="Content">
<p>This is a paragraph tag. Here the content of html.</p>
</div>
<script src="text.js"></script>
</body>
</html>
Code 2
<!DOCTYPE html>
<html>
<head>
<title>Hello, World !</title>
</head>
<body>
<h1>I am learning JavaScript.</h1>
<div id="Content">
<p>This is a paragraph tag. Here the content of html.</p>
</div>
<script>
alert(" This is alert message.");
</script>
</body>
</html>
There is a load event, which will fire AFTER the page is loaded. You can listen to the event:
window.addEventListener('load', function() {
console.log('All assets are loaded');
alert ("This is an alert MSG");
})
You can use setTimeout() for this
<html>
<head>
<title>Hello, World !</title>
</head>
<body>
<h1>I am learning JavaScript.</h1>
<div id="Content">
<p>This is a paragraph tag. Here the content of html.</p>
</div>
<script>
setTimeout(()=>{
alert(" This is alert message.")
},2000)
</script>
</body>
</html>
You can use window.onload function. This function called after body load.
<!DOCTYPE html>
<html>
<head>
<title>Hello, World !</title>
</head>
<body>
<h1>I am learning JavaScript.</h1>
<div id="Content">
<p>This is a paragraph tag. Here the content of html.</p>
</div>
<script>
window.onload = function () {
alert(" This is alert message.");
}
</script>
</body>
</html>
In your first code just put defer attribute as below
<script defer src="text.js"></script>
A script that will be downloaded in parallel to parsing the page, and executed after the page has finished parsing
for more detail refer to the URL
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
create your Script like below
<script type = "text/javascript">
function displayalert() {
alert ("This is an alert MSG");
}
</script>
add this code in your body(this is a button)
<input type = "button" value = "Click me" onclick = "displayalert();" />
when you click on this button you will see the alert
We are using the onclick attribute and call the displayalert() function where the alert() is defined.
I am trying to create an alert function using the getElementById and it is not working. This is a very simple button i am trying to create but obviously its not simple for a noob like me. Thank you for all your help in advance. This is what i currently have:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>alert</title>
</head>
<body>
<button onclick= "click()" style="color:green;" >click</button>
<script>
function click() {
document.getElementById("alerting").innerHTML = "I am an alert";
}
</script>
</body>
</html>
You need to add an element with id="alerting" where your text will appear. Otherwise document.getElementById("alerting") will return null and calling innerHTML on it will throw error.
<body>
<button onclick= "myFunction()" style="font-size:25px;" >click</button>
<p id="alerting">element with alerting id. value will change here</p>
<script>
function myFunction() {
document.getElementById("alerting").innerHTML = "Hello World";
}
</script>
</body>
You dont have any html elements with id="alerting" into which you can set the innerHTML.
If you want a popup alert instead of doing the innerHTML thing... just do:
alert("I am an alert");
Also of note... some browsers wont like functions named: "click".
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>alert</title>
</head>
<body>
<button onclick="someFunction()" style="color:green;" >Click Me</button>
<script>
function someFunction()
{
alert("I am an alert");
}
</script>
</body>
</html>
Im relatively new to HTML and Javascript , Im currently in functions right now.
I tried this code but it didn't print anything. if I use a button and keep the document.get... inside a function it works why?
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Javasc";
</script>
<p>
hey
</p>
<p id="demo"></p>
</body>
</html>
Try calling your function on window.onload maybe. Something like this:
<!DOCTYPE html>
<html>
<body>
<script>
window.onload = function(){
document.getElementById("demo").innerHTML = "Javasc";
};
</script>
<p>
hey
</p>
<p id="demo"></p>
</body>
</html>
You have to let the page rendered and then call the method.
Or put the script tag at the end
<!DOCTYPE html>
<html>
<body>
<p>
hey
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Javasc";
</script>
</body>
</html>
var app=angular.module('ang',[]);
app.controller('ctr',function($scope){
$scope.run=function(){alert("run")}
$scope.break=function(){alert("break")}
})
.test{width:160px;height:30px;background-color:green;color:white}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="ang" ng-controller='ctr'>
<button class="test" ng-click="a?'run()':'break()'">click=calling...{{a?'run()':'break()'}}</button>
<button ng-click="a=!a">click me</button>{{a}}
</div>
</body>
</html>
Here i want to dynamically change the value of ng-click based on a value using conditional statement,but it is not working as expected.Please help me out
Thanks in advance
Change this line shown as below
Because it is already interpolated. You need not to mention ' ' again to call the scope function
<button class="test" ng-click="a?run():break()">click=calling...{{a?'run()':'break()'}}</button>
remove the single quote in the function
change this
{{a?'run()':'break()'}}
to this
{{a?run():break()}}
var app=angular.module('ang',[]);
app.controller('ctr',function($scope){
$scope.run=function(){alert("run")}
$scope.break=function(){alert("break")}
})
.test{width:160px;height:30px;background-color:green;color:white}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="ang" ng-controller='ctr'>
<div class="test" ng-click="a?'run()':'break()'">click=calling....{{a?run():break()}}</div>
<button ng-click="a=!a">click me</button>{{a}}
</div>
</body>
</html>
I write function for manipulation with DOM objects. This function must find element with specific ID and add new child element to element with specific ID:
<html>
<head>
<title> Text </title>
<meta charset="utf-8">
</head>
<body id="tbody">
<script>
function add(){
el = document.getElementById("testform");
var nf=document.createElement("input");
nf.type="text";
el.appendChild(nf);
}
</script>
<p>
<form id="testform">
<button onclick="add();"> create</button>
</form>
</p>
</body>
</html>
Element of text input doesn't create on page,but same code is placed in script tag without function-work
You're reloading the page, and need to return false when clicking the button to stop the form from being submitted :
<html>
<head>
<title> Text </title>
<meta charset="utf-8">
</head>
<body id="tbody">
<script type="text/javascript">
function add(){
el = document.getElementById("testform");
var nf=document.createElement("input");
nf.type="text";
el.appendChild(nf);
}
</script>
<p>
<form id="testform">
<button onclick="add();return false;"> create</button>
</form>
</p>
</body>
</html>
Also, sticking a form inside a paragraph seems unnecessary ?
FIDDLE
Since the Default action of button element type is submit so it submits every time you click. You can do a return false or create a label tag instead of button something like:
<html>
<head>
<title> Text </title>
<meta charset="utf-8">
</head>
<body id="tbody">
<script>
function add(){
el = document.getElementById("testform");
var nf=document.createElement("input");
nf.type="text";
el.appendChild(nf);
}
</script>
<p>
<form id="testform">
<label onclick="add();"> create</label>
</form>
</p>
</body>
</html>
DEMO