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>
Related
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>
<!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>
<!DOCTYPE html>
<html>
<head>
<script>
//if i put window.location= "index.php" here not inside js function it worked but I need it to be inside a function
function newLoad() {
window.location= "index.php"
}
</script>
</head>
<body>
<input type="button" value="press here" onclick="newLoad()">
</body>
</html>
any Ideas how can I make it work inside the javascript function ?
Your code works. Howether, you don't need to use javascript.
<a href="index.php">
<button>press here</button>
</a>
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>
`
I am using an iFrame in my application. Let me give an example here.
I have main page as
<html>
<head>
<script src='jquery.js'></script>
<script>
function TestFunction()
{
var FirstName = $("#first_name").val();
alert(FirstName);
}
</script>
<head>
<body>
Enter First Name: <input type='text' size='20' id='first_name'><br />
<input type='button' value='Cilck' onclick='TestFunction();'><br />
<iframe id='test_iframe' src='test_iframe.htm' height='200' width='200'>
</iframe>
</body>
</html>
...and this works fine with alerting whatever is entered in textbox
But is it possible to invoke the same function in iframe that will alert the value present in textbox of the parent page?
Suppose test_iframe.htm code is like this
<html>
<head>
<script src='jquery.js'></script>
<script>
function IframeFunction()
{
TestFunction(); // I know this wont work.. just an example
}
</script>
<head>
<body>
<input type='button' value='Click' onclick='IframeFunction();'>
</body>
</html>
Can this be done ?
I believe this can be done with 'parent'
function IframeFunction()
{
parent.TestFunction();
}
<html>
<head>
<script src='jquery.js'></script>
<script>
function IframeFunction()
{
parent.TestFunction(); // or top.TestFunction()
}
</script>
<head>
<body>
<input type='button' value='Click' onclick='IframeFunction();'>
</body>
</html>
<a onclick="parent.abc();" href="#" >Call Me </a>
See Window.Parent
Returns a reference to the parent of the current window or subframe.
If a window does not have a parent, its parent property is a reference to itself.
When a window is loaded in an , , or , its parent is the window with the element embedding the window.
This answer is taken from stackoverflow