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.
Related
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
I have a flask web application I am creating( also using Angular CLI), and I have a button. I am trying to use JavaScript to conduct an action on the button click but for whatever reason I can't get the JavaScript to work.
However when I copy the java Script into a completely different simple flask project (that I downloaded from online), it works fine?
Does anyone know if I have to do something in my flask project to get the javascript working?
I read somewhere it has to do with the way i run the flask app ? (0.0.0.0 vs localhost) but im not sure
Here's the code I am trying to use:
<!DOCTYPE html>
<html>
<body>
<h1>The onclick Event</h1>
<p>The onclick event is used to trigger a function when an element is clicked on.</p>
<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
You passed function result as an argument instead of function instead.
Use
onclick="myFunction"
But if you want do it in a professional way you should do this:
<!DOCTYPE html>
<html>
<body>
<h1>The onclick Event</h1>
<p>The onclick event is used to trigger a function when an element is clicked on.</p>
<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>
<button>Click me</button>
<p id="demo"></p>
<script>
document.querySelector('button').addEventListener('click', myFunction)
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
And using innerHTML to inserting data isn't the best option too. In javascript you can create DOM elementr programaticaly.
Try this, if none of the console.log's show up then its a issue with how it's compiled
document.addEventListener('DOMContentLoaded',()=>{
console.log('loaded)
let btn = document.querySelector('button')
btn.addEventListener('click', myFunction)
function myFunction(e) {
console.log(e);
document.getElementById("demo").innerHTML = "Hello World";
}
})
Try from a ‘static’ folder in the root directory. Literally call it static and then place a js file inside.
Then in the html try this
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.
In the below html, the front button doesn't respond while the back button changes the content of the tag.
<!DOCTYPE html>
<html>
<body>
<p id ="para">Initial text. </p>
<button onClick=document.getElementById('para').innerHTML="move front">
front
</button>
<button onClick=document.getElementById('para').innerHTML="back">
back
</button>
</body>
</html>
In the below, both the buttons change the content of the tag.
<!DOCTYPE html>
<html>
<body>
<p id ="para">Initial text. </p>
<button onClick=document.getElementById('para').innerHTML="movefront">
front
</button>
<button onClick=document.getElementById('para').innerHTML="back">
back
</button>
</body>
</html>
Why does a bank space make a button unresponsive?
That is just invalid HTML.
You have to put quotes around your whole onclick attribute value, otherwise it will end at the space.
onClick = document.getElementById('para').innerHTML="move // cut off here
front" // a second (meaningless) attribute for your button tag.
Please consider this syntax:
<button onclick="document.getElementById('para').innerHTML='move front'">front</button>
You are probably having issues if you are using this technique.
I am sorry but this is not how you attach a click event to elements in modern javascript, at least if you want to work with what's called "good practices".
The better method would be to attach a click event to a desired element using javascript.
I will give you a short code example.
First the HTML - I will use your original HTML (modified a bit):
<!DOCTYPE html>
<html>
<body>
<p id ="para">Initial text. </p>
<button id="frontBtn"> front </button>
<button id="backBtn"> back </button>
</body>
</html>
As you can see, I have removed your "onclick" events from the buttons, and assigned an id to each button.
Second, we will write some javascript to properly attach a click event to each one of the buttons, and of course execute the change of text as you originally was intending to do:
if you are familiar with jQuery then this will do:
$('#frontBtn').on('click',function(){
$('#para').html('move front');
});
$('#backBtn').on('click',function(){
$('#para').html('back');
});
This can also be done with vanilla (native) javascript:
document.getElementById("frontBtn").addEventListener("click", function(){
document.getElementById("para").innerHTML = "move front";
});
document.getElementById("backBtn").addEventListener("click", function(){
document.getElementById("para").innerHTML = "back";
});
Now we have a nicely structured event handler for each button, more code can be easily added.
As for where to insert your javascript ?
You can add the javascript to your html document by using script tags in your html document head like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// your code here..
</script>
</head>
<body>
....
....
Or even better - create a separate script file and load it at the bottom of your html page like this:
<!DOCTYPE html>
<html>
<head>
....
</head>
<body>
....
....
<script type="text/javascript" src="scripts.js"></script>
</body>
</html>
This is the better way to attach events to elements, using javascript.
Imagine if you try to write 50-100 lines of code inline ? impossible! but with an event handler function you can do it easily.
Things will basically work better and your project will be much easier for you to maintain.
Hope it helps a bit!
i need to make a custom JS button into a preexisting div. I can make a button appear on the body, but i can't seem to make it inside any div.
my code structure would be along these lines
<html>
<body>
<div id="placeButtonHere"> </div>
<script type="text/javascript">
window.onload = function myFunction()
{
var btn=document.createElement("BUTTON");
document.body.appendChild(btn);
}
</script>
</body>
</html>
this works to create a button on the body, however it doesn't work when i try to make it into the div.
I have tried
$('#placeButtonHere').append(btn).html();
as well as a few different iteratinos of that code. and it just can't seem to work.
NOTE: At my school where i am writing this now JSfiddle is a blocked site so i wont be able to use them.
thanks
Try:
<html>
<body>
<div id="placeButtonHere"> </div>
<script type="text/javascript">
window.onload = function myFunction()
{
var btn=document.createElement("BUTTON");
document.getElementById("placeButtonHere").appendChild(btn);
}
</script>
</body>
</html>