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>
Related
My Index.html
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<button onclick="document.location='target.html'" name="this" type="submit" value="hello" >target</button>
</body>
</html>
My Target.html
<!DOCTYPE html>
<html>
<body>
<h1>2nd page</h1>
</body>
</html>
I would like to access the have access to the value of the clicked button on index.html so i can use it anywhere on the target.html page
In my head it looks something like this...
<!DOCTYPE html>
var buttonval = value of button click
<html>
<body>
<h1>2nd page</h1>
</body>
</html>
Ideally I would like to achieve this using only html and java script
You first need to send the value, so based on your code it would go something like this:
<button onclick="document.location='target.html?val=hello'" name="this" type="submit" value="hello" >target</button>
And then you need to recover that value on the target page:
var url = new URL(window.location.href);
var val = url.searchParams.get("val");
You can use GET method (value in the Url) or POST method (use <FORM).
Here in Get :
Index.html:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<button onclick="document.location='target.html?val=1234'" name="this" type="submit" value="hello" >target</button>
</body>
</html>
Target.html :
<!DOCTYPE html>
<html>
<body>
<h1>2nd page</h1>
<div id="val"></div>
</body>
<script type="text/javascript">
var parameters = location.search.substring(1).split("?");
console.log(parameters);
var vals = parameters[0].split("=");
console.log(vals);
document.getElementById("val").innerHTML = "value = "+vals[1];
</script>
</html>
See informations in the Console (F12) in your Browser.
Good continuation.
_Teddy_
Use Page Including Using PHP
example : <?php include("page.php"); ?>
perform click direct in visible file.
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>
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction(demox)">Click me</button>
<p id="demo"></p>
<p id="demox"></p>
<script>
function myFunction(cat) {
var dog = document.getElementById( cat);
dog.innerHTML = "Hello World";
}
</script>
</body>
</html>
I am trying to pass an id value of "demox" to a js function to display some text with an onclick event, but it doesn't seem to work. what is the problem here?
You can find script modified which solve your issue here.
https://jsbin.com/yitovikete/edit?html,output
Generally, I would suggest you to add <script> tag within the header of your HTML page like this:
https://jsbin.com/yitovikete/1/edit?html,output
This is good when you need to do something while the body is loading, or want to maybe make some ajax requests.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction('demox')">Click me</button>
<p id="demo"></p>
<p id="demox"></p>
<script>
function myFunction(cat) {
var dog = document.getElementById( cat);
dog.innerHTML = "Hello World";
}
</script>
</body>
</html>
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>
`
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(mypara)
{
mypara.innerHTML="Ooops!";
}
</script>
</head>
<body>
<script>var mypara = document.getElementById("para1");</script>
<h1 onclick="changetext(mypara)">Click this text to change the content of following paragraph</h1>
<p id="para1"> this is a paragraph I would like to change </p>
</body>
</html>
I would like to let user to click the heading to change the content of the paragraph, but I don't know the correct way of coding that. How to send the "mypara" parameter to myFunction() in HTML?
Your example almost works - the problem is when you execute this line:
var mypara = document.getElementById("para1");
The element you're refering to does not yet exist. You could fix it by just going inline:
<h1 onclick="changetext(document.getElementById('para1'))">...</h1>
Live example for this approach: http://jsfiddle.net/Gw5CG/2/
or perhaps just pass the id to the method:
<h1 onclick="changetext('para1')">...</h1>
and change the method to do the getElementById:
function changetext(mypara)
{
document.getElementById(mypara).innerHTML="Ooops!";
}
Live example for this approach: http://jsfiddle.net/Gw5CG/1/
The element doesn't exist yet when you're trying to get it.
Why not just get it in the event handler
<!DOCTYPE html>
<html>
<head>
<script>
function changetext() {
document.getElementById("para1").innerHTML = "Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext()">Click this text to change the content of following paragraph</h1>
<p id="para1">this is a paragraph I would like to change</p>
</body>
</html>