I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>some_stuff</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="img/ico" href="/some_stuff/favicon.ico">
<link rel="stylesheet" href="/some_stuff/stylesheets/main.css">
<body>
<script type="text/javascript" src="/some_stuff/javascripts/main.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<MY_API_KEY>&callback=initialize">
</script>
</body>
</head>
</html>
This is the contents of my main.js:
function initialize() {
console.log("Initialized!");
// Do other stuff to render the map
renderMap();
}
For some reason, this is throwing the error Uncaught TypeError: window.initialize is not a function in the browser.
However, if I change my code to:
<!DOCTYPE html>
<html>
<head>
<title>some_stuff</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="img/ico" href="/some_stuff/favicon.ico">
<link rel="stylesheet" href="/some_stuff/stylesheets/main.css">
<body>
<script type="text/javascript" src="/some_stuff/javascripts/main.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<MY_API_KEY>&callback=initialize">
</script>
<script>
function initialize() {
console.log("Initialized!")
}
</script>
</body>
</head>
</html>
and main.js just contains
renderMap()
then everything works. What gives?
Related
I'm trying to follow a video, but the button isn't working. I cannot press the button. How do I fix my code?
My code
function increment() {
console.log("added");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Amount:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn" onclick="increment()">INCREMENT</button>
<script src="index.js"></script>
</body>
</html>
I'm not certain where to go from here
Your code seems running fine, I just added the increment function. You'll see the button work. :)
function increment() {
document.getElementById("count-el").innerHTML = eval(document.getElementById("count-el").innerHTML) + 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Amount:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn" onclick="increment()">INCREMENT</button>
<script src="index.js"></script>
</body>
</html>
I have an HTML file linked to a script. A button defined in the HTML has an onclick function 'incrementLabel()' but the function in the script throws the warning:
'incrementLabel' is declared but its value is never read.
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
</body>
</html>
I can't find any solutions to the problem other than writing the function in a in HTML. Any help would be much appreciated.
Thanks!
<!DOCTYPE HTML>
<script>
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
</body>
</html>
This works perfectly fine. Check if you are importing your JS script correctly.
You can put the javascript code into a before the closing tag .
HTML:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
<script>
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
</script>
</body>
Some of online tools like https://playcode.io don't recognise your code but I have tested in vscode and works fine.
Maybe have to use other online tool or can test if you have imported the code well with a console.log("Works fine") into your javascript file.
Sorry for my english.
Hi I am trying to add a start button via jquery to appear when the page loads. However, the button is not loading.
Here is my code:
$(window).on('load', function() {
const startPage = $("<button id='start'>Go</button>");
$('main').append(startPage);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Quiz</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="app.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1>Objective London Quiz</h1>
</header>
<main class="questions"></main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
I am trying to do a project with javascript using events on keys to display alphabets on the screen, I'm stuck with this error. please help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script src="script.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
This is the script file that I'm using
script.js
(document).keydown(function(event) {
if (event.which === 13) {
console.log("you pressed");
}
});
You're running your script before jQuery, so $ doesn't exist yet.
Place
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Before
<script src="script.js" charset="utf-8"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip"]').off("mouseenter mouseleave");
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
why i am not able to get tooltip even if i initializing two times ??
DavidG's comment with logging. Basically you need to completely destroy the tooltip if you want to be able to call tooltip again and have it attach the listeners. By doing calling off you were just removing the listeners but not destroying the tooltip. Therefore when you called tooltip a second time it would not initialize the tooltip again. Because of the following line:
if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
https://github.com/twbs/bootstrap/blob/v3-dev/js/tooltip.js#L501
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a data-toggle="tooltip" data-placement="top" title="Hooray!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
console.log("init");
$('[data-toggle="tooltip"]').tooltip();
setTimeout(function() {
console.log("destroy");
$('[data-toggle="tooltip"]').tooltip("destroy");
setTimeout(function() {
console.log("reinit");
$('[data-toggle="tooltip"]').tooltip();
}, 5000);
}, 5000);
});
</script>
</body>
</html>
I removed the duplicate declaration and added a tooltip placement and now it works
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a data-toggle="tooltip" data-placement="top" title="Hooray!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a id="anchor" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>
<script>
var handler = function (e) {
$('[data-toggle="tooltip"]').tooltip();
}
$(document).ready(function(){
$('[data-toggle="tooltip"]').off("mouseenter mouseleave",handler);
$('[data-toggle="tooltip"]').on("mouseenter mouseleave",handler);
});
</script>
</body>
</html>
It works, though I believe there might be better solutions if you elaborate more on what exactly it is that you want to do.