I created a simple app in PhyCharm and in my static folder i have a .js file and in my templates folder, a index.html file.
In my .js file, i have this:
console.log('loaded script.js');
$(document).ready(function () {
$("#submit").on('click', function (event) {
handleClick();
});
});
function handleClick() {
alert("We got here");
$.ajax('/', {
type: 'GET',
data: {
fmt: 'json'
}
});
}
and this is the index.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="static/script.js"></script>
</head>
<body>
<input type="button" id="submit" value="Get It">
</body>
</html>
when the app loads, "loaded script.js" shows in the console, but the button click doesn't work. Am not sure why as the code looks fine to me.
Everyone has given you the answer. This one uses Google's CDN.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="static/script.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
</head>
<body>
<input type="button" id="submit" value="Get It">
</body>
</html>
Refer to http://jsfiddle.net/hpX3e/ for an example.
You need to load your jQuery File
Update You shouldn't be loading your JavaScript in your <head> tag. You should be loading it at the bottom of your <body> tag.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" id="submit" value="Get It">
<script src="static/jQuery.js"></script>
<script src="static/script.js"></script>
</body>
</html>
Instead of cluttering up your .js file with...
$(document).ready(function () {
$("#submit").on('click', function (event) {
handleClick();
});
});
Why not simplify the entire thing by simply calling the function in the HTML.
<input type="button" id="submit" onclick="handleClick()" value="Get it">
Related
Here is my code:
I am calling the function run() on the click of a button. run() will call the function main() from the source code of bundle.js. The console logs that the function main() is not defined. I even tried running it in the console itself with no success.
<script type="text/javascript" src="bundle.js"></script>
<script type="text/javascript">
function run() {
main(document.getElementById('playlistUrl').value)
}
</script>
<input id="playlistUrl" placeholder="Enter a link...">
<button onclick="run()" id="go">Go!</button>
the function run() is defined, but not any funtion from bundle.js
This is working fine!, check your file location or fails in bundle.js file
//bundle.js file
function main(value){
console.log(value);
}
//main.js file
function run() {
main(document.getElementById('playlistUrl').value)
}
<input id="playlistUrl" placeholder="Enter a link...">
<button onclick="run()" id="go">Go!</button>
<script type="text/javascript" src="bundle.js"></script>
Code for index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="bundle.js"></script>
</head>
<body>
<script type="text/javascript">
function run() {
main(document.getElementById('playlistUrl').value)
}
</script>
<input id="playlistUrl" placeholder="Enter a link...">
<button onclick="run()" id="go">Go!</button>
</body>
</html>
Code for bundle.js:
function main(){
document.write("Main ran")
}
How can I pass argument to function redirect in JavaScript
Here is my code:
<script type="text/javascript">
<!--
function redirectlink(text){
window.location = "index.php?keyName="+ text;
}
//-->
</script>
<form>
<button type="button" id="butt_1" onclick="redirectlink(KEY_POWER)"> 1 </button>
Thank you in advance.
This can be done either by using getElementById and addEventListener
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="foo">Click</button>
<script type="text/javascript">
document.getElementById("foo").addEventListener("click", function(){
window.location.replace("http://stackoverflow.com/q/36933820/5526354")
})
</script>
</body>
</html>
either onclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="foo" onclick="action()">Click</button>
<script type="text/javascript">
function action(){
window.location.replace("http://stackoverflow.com/q/36933820/5526354")
}
</script>
</body>
</html>
Using onclick is deprecated.
With just only JavaScript (without jQuery / Angular etc.) you can use addEventListener on click event.
for example:
var btn = document.getElementById('butt_1');
btn.addEventListener('click', function(e) {
// your code
});
In this function you can for example get value/txt from this button element and something else which you want.
This is such a basic thing, I could not figure out. Consider the following:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js" />
<script language="JavaScript" type="text/javascript">
function Show(msg){
alert(msg);
}
</script>
</head>
<body>
<input type="button" onClick="Show('hello');" value="Show 1" />
</body>
</html>
The above sample works fine if I exclude "jquery" include. What am I missing here?
that is because self closing script tags do not work. use:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script>
Link to reference
Is there an other way to link to an element on the same page without using anchor URLs?
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Alternative to anchor URL</title>
</head>
<body>
<input type="button" value="Go there »" />
<div style="height:1280px;"></div>
<div id="goHere" style="width:360px;height:240px;background-color:#61b2cc"></div>
</body>
</html>
There is! Look at the code below:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Alternative to anchor URL</title>
<script type="text/javascript">
function scrollWindow() {
{
var top = document.getElementById('goHere').offsetTop;
window.scrollTo(0, top);
}
}
scrollWindow();
</script>
</head>
<body>
<input type="button" onclick="scrollWindow()" value="Go there »" />
<div style="height:1280px;"></div>
<div id="goHere" style="width:360px;height:240px;background-color:#61b2cc"></div>
</body>
</html>
With jQuery:
$("button").click(function(){
window.scrollTo($("#goHere").offset().top);
});
i would like to add some buttons on my site and change the background when i click them.
<html>
<head>
<SCRIPT LANGUAGE "JavaScript">
function cambiaSfondo(code){
document.sfonfo=code
}
</SCRIPT>
</head>
<body>
<FORM>
<input type = "button" name="button1" value="sfondo1" onClick='idk what to put here'>
</FORM>
</body>
</html>
sfondo is not a valid property
function cambiaSfondo(img){
document.body.style.backgroundImage = 'url(' + img + ')';
}
<input type = "button" name="button1" value="sfondo1" onClick="cambiaSfondo('/path/to/img')">
http://www.w3schools.com/jsref/prop_style_backgroundimage.asp
Working code here :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script tpye="text/javascript">
// $(document).ready(function() {
function cambiaSfondo(img) {
$('body').css('background-image', 'url('+img+')');
}
//});
</script>
</head>
<body>
<FORM> <input type = "button" name="button1" value="sfondo1" onClick="cambiaSfondo('search-icon-2x.png');"> </FORM>
</body>
</html>
First of all you don't have to use form because you are not getting or posting anything to server!
<html>
<head>
<script type="text/javascript">
function changeColor(){
document.body.style.background="#000000";
}
</script >
</head>
<body>
<button type="button" onclick="changeColor()">Change Color</button>
</body>
</html>
You can change any background property : http://www.w3schools.com/jsref/prop_style_background.asp
This is your exact case : Example