Flask JavaScript/HTML Scripts Not Working - javascript

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

Related

How to put an internal script inside a div tag?

I am trying to run a javascript inside of a div tag because i have heard its possible but for some reason the code does nothing.
<!DOCTYPE html>
<html>
<body>
<title>XDSITE</title>
<br>
<br>
<div id=mycode style="BACKGROUND:
url('javascript:eval(window.alert("sometext"))'"></div>
</body>
</html>
You have some problems in your HTML it is not valid, you can't run JavaScript from a style attribute.
You can run Javascript from within a <script> tag which really is the best way to do it.
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
Alternatively there are some HTML elements that allow you to execute it on some events, like onchange, onclick etc.
<select onchange="myFunction()">
<button onclick="myFunction()">Click me</button>
https://www.w3schools.com/ is a great resource for learning more about each html element, and also JavaScript as a whole.
Good luck
can you please tell here which java script framework is you are using? you can achieve this by using and template java script framework like Angular, React...
If u dont want to use any framework than you need to write pure javascript or jquery code for assigning the background css prop.
for entire body,
document.body.style.backgroundImage = "url('img_tree.png')";
for div,
document.getElementById("mycode").style.backgroundImage = "url('img_tree.png')";
<!-- U have to give event inside expression like onclick ,mouseup Click that text -->
<div id=mycode onclick="alert('Hi ....sometext')">THARA
</div>
<!DOCTYPE html> <html> <body> <title>XDSITE</title> <br> <br> <div id=mycode style="BACKGROUND: url('javascript:eval(window.alert("sometext"))'"></div> </body> </html>
Answer :
Open script in footer
<script>
$( "#mycode" ).click(function() {
alert( "Hai" );
});
</script>
I hope its working for you ...
You can target HTML tag using getElementById() and then apply custom style like this
document.getElementById("Mydiv").style.backgroundColor="#0000"
or apply a bunch of styles like this
var dev = document.getElementById("Mydiv");
dev.style.backgroundColor="#0000";
dev.style.fontSize="..";
dev.style.backgroundImage="..";
You can run your function using "onerror" event. And also you must do some error in that case. For eg.
<img src="someFakeSrc" onerror='javascript:eval(window.alert("sometext"))'>
HTML doesn't see a src of picture then run a 'onerror' event.

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.

Calling an alert function from a button but without using onclick

What im trying to do, is to call my function from whenever someone clicks on my button. However, i know that it can be done with
<button onclick="myFuntion()>
But i want to skip that step, i dont want a function in my button, i've heard that its bad programming.
However, heres how my file looks.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javacript" src="javascript.js"> </script>
<title> Javascript </title>
<script>
function testFunction(){
document.getElementById("test").onclick = Hello;
}
function Hello(){
alert("Hello");
}
</script>
</head>
<body>
<button type="button" id="test" <!-- I know i can use onclick="testFunction()" here but i dont wanna !-->> Click me </button>
</body>
</html>
So how come it doesnt pop-up with the box "Hello" whenever i push the button, what have I done wrong?
You have to call your testFunction after the HTML body is loaded so that it actually creates he binding.
That is, at the end of the file, you'd do something like:
...
<script>
testFunction()
</script>
</body>
...
If you run that binding code in your head script the button element won't exist yet — that is why this have to be at the end.
JavaScript libraries such as jQuery make this more elegant by providing an ready hook, where one puts code to be called once the page is fully loaded, without having to resort to code on the bottom of the page.
Complete example with script at end (confusingly, Stack Snippets don't show it to you in the order they actually are in the snippet; even though it doesn't look like it, the script is at the end here):
// Scoping function to avoid creating unnecessary globals
(function() {
// The click handler
function Hello() {
alert("Hello");
}
// Hooking it up -- you *can* do it like you did:
//document.getElementById("test").onclick = Hello;
// ...but the modern way is to use addEventListener,
// which allows for more than one handler:
document.getElementById("test").addEventListener(
"click", Hello, false
);
})();
<button type="button" id="test">Click me</button>
window.onload=testFunction;
function testFunction(){
document.getElementById("test").onclick = Hello;
}
function Hello(){
alert("Hello");
}
Just run the line in your testFunction always. As seen here:
https://jsfiddle.net/arugco4b/

return domain name in javascript

I'm trying to use javascript to echo/return the domain name into a displayed document.
I found this code that works by using a button click
But I need it to run automatically when the page is loaded.
The idea is so I have an about page on a site with multiple domains.
So if someone loads foo.com the page says "About FOO.COM" and if someone loads BAR.COM it likewise says "About BAR.COM" on the fly.
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to return the domain name of the server that loaded this document.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = document.getElementById("demo");
x.innerHTML=document.domain;
}
</script>
</body>
</html>
Just call the function immediately instead of putting it in an event handler.
myFunction();
with jquery:
<div id="yourbutton>your Button</div>
<script>
$(document).ready(function(){
$("#yourbutton").html(document.domain);
});
</script>
without jquery:
search for window.onload
...yay my first post on stackoverflow ;

Why javascript doesnt get element by id when that element is below script tag?

I'm learning javascript and studying this example:
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
My question is why doesn't the script work properly when the line with <p id="p1">Hello World!</p> is below the script, and what happens during its execution? Thank you.
Because the JavaScript is run when the browser encounters it, when compiling/rendering the page; not once it's finished rendering the page. So, if the element appears after the script it doesn't (yet) exist at the point at which the JavaScript is run.
You could, though, create a function and have that function run once an element has loaded, for example:
<script>
function bodyLoaded(){
document.getElementById('p1').innerHTML = 'New text!';
}
</script>
<body onload="bodyLoaded()">
<!-- HTML here... -->
<p id="p1"></p>
</body>
Javascript is an interpreted language. 'interpreted' means that it:
"executes instructions directly, without previously compiling a
program into machine-language instructions"
Hence because the javascript interpreter executes instructions on the page line by line (starting from the top of the page), the order in which code is defined is crucial. So in your example the paragraph element has to be defined before your call to getElementById.
Elements must be defined in order for JavaScript to recognize them. If you chose to put your JavaScript inside the <head> tag, then you can do this with the window.onload event. This can be done several ways.
//Obtrusive JavaScript
<html>
<head>
<script>
function loadMe(){
var doc = document;
function E(e){
return doc.getElementById(e);
}
E('p1').innerHTML = 'New text!';
}
</script>
</head>
<body onload='loadMe'>
<p id='p1'>Hello World!</p>
</body>
</html>
/* Unobtrusive JavaScript ---> the way you should learn it in my opinion
Notice there's no onload attribute in the body tag. Also, I use onload
instead of window.onload, because window is implicit, just as document
is a property of window as well.
*/
<html>
<head>
<script>
onload = function(){
var doc = document;
function E(e){
return doc.getElementById(e);
}
E('p1').innerHTML = 'New text!';
}
</script>
</head>
<body>
<p id='p1'>Hello World!</p>
</body>
</html>
Of course, you should use external JavaScript whenever possible.

Categories

Resources