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")
}
Related
after to make some research I took the measures to guarantee that the JS will be loaded before trying to run it but... it won't work!
This works:
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1" charset="utf-8">
</head>
<html>
<body>
<script type="text/javascript">
function initialize() {
console.log('foo')
}
window.onload = function() {
initialize();
};
</script>
</body>
</html>
But this doesn't:
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1" charset="utf-8">
</head>
<html>
<body>
<script type="text/javascript" src="test.js">
<script type="text/javascript">
window.onload = function() {
initialize();
};
</script>
</body>
</html>
test.js:
function initialize() {
console.log('foo')
}
I don't get any error. It just doesn't work. What am I doing wrong?
Thanks!
You need a closing script tag for the tag that is calling the external js file.
<script type="text/javascript" src="test.js"></script>
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
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">
I have setup my account on scriptcam, but can't get camera to load. I've created a test page to just get the video player up, and that won't work. I can't even get the errors to load, so I suspect that it's something to do with the scriptcam.js files not even being loaded? See below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>iseYoo video test</title>
<script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script language="JavaScript" src="scriptcam.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#webcam").scriptcam({
onError: oopsError,
showDebug: true
});
});
function oopsError(errorId,errorMsg) {
alert(errorMsg);
}
function showCurrentVersion() {
alert($.scriptcam.version());
};
</script>
</head>
<body>
<div id="webcam"></div>
</body>
</html>