Why the function doesn't alert onclick? - javascript

I'm not too sure why the code below doesn't work in the browser. Any ideas?
<!DOCTYPE html>
<html>
<script>
function click() {
alert("You clicked on a paragraph");
}
</script>
<body>
<p onclick="click()" id="paragraph">This is a paragraph</p>
</body>
</html>
I figured out how to do the above with the document.getElementById function (see below).
<!DOCTYPE html>
<html>
<script>
function click() {
alert("You clicked on a paragraph");
}
</script>
<body>
<p id="paragraph">This is a paragraph</p>
</body>
<script>
document.getElementById("paragraph").onclick = function() {
click();
}
</script>
</html>
My question is why the first approach doesn't work?

Your first function doesn't work because click() is a built-in function in JavaScript which simulates a mouse-click on an element. Here is a demo. So when you click on the paragraph the built-in function is executed first instead of your function which displays the message through alert() function
Since your second function is an anonymous function it executes without any error.
To solve it simply rename it to any other name except the name of a built-in function. Refer the code snippet below for example.
<!DOCTYPE html>
<html>
<body>
<script>
function alertOnclick() {
alert("You clicked on a paragraph");
}
</script>
<p onclick="alertOnclick()" id="paragraph">
This is a paragraph
</p>
</body>
</html>

Went through your Code #sb2021
I think it is well resolved by #rifkyniyas
But I would like to give you a suggestion.
Try to place the script tag inclusions just before the closing of body tag. Placing scripts at the bottom of the element improves the display speed, because script interpretation slows down the display.
Something just like this
<body>
.
.
.
.
.
.
<script>...</script>
</body>
Check this out

Related

Calling javascript function when html is executed

I have one task, when I open the html page, that html contains javascript under script tag, and under which I have implemented one function called auther(). How can I call this function while opening the html page, I don't want to implement it by using onClick or onLoad, etc. methods from html/javascript.
Means whenever my html gets executed my javascript function should get called itself. Following is my html:
<html>
<head>
<title>Demo</title>
</head>
<body>
<div id="authOps" >
<button onclick="auther();">GET author</button>
//By clicking on this button it is working but I want to execute
//this function when this html get executed
</div>
</body>
<script type="text/javascript">
function auther(){
//some code
}
</script>
</html>
In the above scenario whenever my html page is opened, the javascript function should get executed without any click handling.
Note : I have mentioned html code just for reference purpose, My main purpose just to execute javascript function, how can I achieve this??
There are 2 ways to do this as far as i know,
1:
<html>
<head>
<title>Demo</title>
</head>
<body>
<div id="authOps" >
<button onclick="auther();">GET author</button>
//By clicking on this button it is working but I want to execute
//this function when this html get executed
</div>
</body>
<script type="text/javascript">
function auther(){
console.log("Hi");
};
auther();
</script>
</html>
2:
<html>
<head>
<title>Demo</title>
</head>
<body>
<div id="authOps" >
<button >GET author</button>
//By clicking on this button it is working but I want to execute
//this function when this html get executed
</div>
</body>
<script type="text/javascript">
var thisIsAFunction = function (){
console.log("Hi");
}();
</script>
</html>
You can give a try with both options.
Just call the method in a script block, instead of from the button click
<script>auther(); </script>

Alert pop-up not showing

I can’t find the problem with my simple code. The button shows, but the alert pop-up doesn’t show when I click on it.
What am I doing wrong?
<DOCTYPE! html>
<html>
<body>
<h1>This will be a test for Javascript</h1>
<button> onclick=“myFunction()”>I like it</button>
<script>
function myFunction() {
alert(“are you sure?”);
}
</script>
</body>
</html>
Problem in smart quotes.
Use
"
quotes.
<button onclick="ok()">Ok</button>
<script>
function ok() {
alert("ok");
}
</script>
Use "" not “ in your code
Try to write your js code before html "button" code.
And try also to add a comma in the end of onclick script.

my simple code is not working

my very simple html code, actually my javascript code is not working, here is my code:
<!DOCTYPE html>
<html>
<head>
<script>
function write(){
document.getElementById("div1").innerHTML = "hello world";
}
</script>
</head>
<body>
<div id="div1" onclick="write()">hello</div>
</body>
</html>
i want to change the <div> content to "hello world". but when i try to do it, when i click the <div> element, its content is erased and it gives me a blank page. what am i doing wrong? any help would be appreciated.
That happens because 'write' is already defined as a method from the document object. You need to change the name of the method to something else.

Javascript doesn't work in html file

I have html file:
<html>
<head>
<script type="text/javascript" src="new.js"></script>
</head>
<body>
<p id="contentBI" >you should click here! </p>
</body>
</html>
and javascript file:
function doAlert() {
alert("hi!");
}
function addevent () {
theBI=document.getElementById("contentBI");
theBI.addEventListener("click",doAlert);
}
document.addEventListener("load",addevent);
Javascript doesn't run.
use window.addEventListener("load",addevent); instead of document.addEventListener("load",addevent);
DEMO
So you want a document ready like jquery, try this:
document.addEventListener("DOMContentloaded",addevent, false);
Demo here
Assuming this is all of your code, the first issue you should tackle is telling your page where your Javascript is at.
Try placing your script between <script> </script> tags within your HTML file.
</head>
<body>
<p id="contentBI" >you should click here! </p>
<script>
function addevent (){
theBI=document.getElementById("contentBI");
theBI.addEventListener("click",doAlert);
}
document.addEventListener("load",addevent);
</script>
</body>
</html
It still won't work, most likely. But it's a start.

Show & Hide an element after click

What i want to do is simple. When i click the image, i want some message to appear.
Afterwards, when i click it again i want it to disappear. I have problems iplementing it
due to my lack of jQuery knowledge. I would appreciate some help with the following code, as well as some other implementations. I know i can do something with class="hidden" and have jQuery add/remove it but oh well.
This is what i'm trying to work with.
<!DOCTYPE html>
<html>
<head>
<script>
function greet(){
a = document.getElementById('here');
if (a.trim().length==0){
a.innerHTML = 'message!';
}
else{
a.innerHTML = '';
}
</script>
</head>
<body>
<img src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt" onclick="greet()"/>
<p id='here'></p>
</body>
</html>
EDIT: seems like i should use a.value, but i must be doing something else wrong too.
If you are using jQuery it is very simple; just use this as your JavaScript (don't forget to link the jQuery main library - I like the Google CDN for that). Just use the toggle function:
function greet() {
$('#here').toggle();
}
Also it is better to register the onClick through jQuery rather than your html (for examplesee this SO question). So that would be like this for the whole page instead :
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document).ready(function() {
$("#greet").click(
function () {
$('#here').toggle();
}
);
$("#here").hide();
}
</script>
</head>
<body>
<img id="greet" src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt"/>
<p id='here'><!--MESSAGE SHOULD BE HERE--></p>
</body>
</html>
Working example in jsFiddle.

Categories

Resources