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.
Related
Why is nothing displayed in the console when selecting text?
<!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>
</head>
<body>
dhksdh lsjkdlskdj s fjlkfjs d lsdjslkdj s sldjsldkj s
<script>
const onSelect = () => {
console.log('onSelect text')
}
document.body.addEventListener('select', onSelect)
</script>
</body>
</html>
Maybe I wrote something wrong?
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>
How to append tag inside div id=demo? I use nodejs.
blog.html
<!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>
</head>
<body>
<div id="demo"></div>
</body>
</html>
server.js
app.get(":/blog", (req,res) => {
res.sendfile("blog.html");
}
I have a site that should first load external js codes before it executes code in the dom but i wont work. Everytime my external codes load after the js in the body tag what caused problems like undefined classes and variables
index.html
<!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>Site</title>
<link rel="stylesheet" href="./style.css">
<script src="./project/load.js"></script>
</head>
<body>
<h1>project</h1>
<div id="project"></div>
<script src="./script.js"></script>
</body>
</html>
./project/load.js
window.onload = function() {
var links = ["./project/script1.js", "./project/script2.js", "./project/script3.js"];
for(var link of links) {
var script = document.createElement("script");
script.src = link + "?0";
script.setAttribute("onerror", "reload(this)");
document.head.append(script);
}
}
I tried also with 'addEventListener('DOMContentLoaded', function() {...});' but it did work either.
I hope you can help me.
EDIT 1:
request order
./project/load.js
./script.js
./project/script1.js
./project/script2.js
./project/script3.js
Load your javascript with defer attribute. Replace your HTML with below. The "defer" attribute allows the javascript is run only after the page loading is complete. Meaning the DOM is available
<!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>Site</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>project</h1>
<div id="project"></div>
<script src="./project/load.js" defer></script>
<script src="./script.js" defer></script>
</body>
</html>
References and further read
https://www.sitepoint.com/introduction-jquery-deferred-objects/
https://www.w3schools.com/tags/att_script_defer.asp
Here is what i've done. Please look at this below
HTML
<!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>Site</title>
</head>
<body>
<h1>project</h1>
<div id="project"></div>
<script src="load.js" defer></script>
<script src="script.js" defer></script>
</body>
</html>
Javascript - load.js
(function(){
var dom = document.getElementById("project");
if( dom !== null ){
dom.innerHTML = "<p>Iam load.js " + new Date().toString() + "</p>";
console.log("Iam load.js " + new Date().toString());
}
})();
Javascript - script.js
(function(){
var dom = document.getElementById("project");
if( dom !== null ){
dom.innerHTML = dom.innerHTML + "<p>Iam script.js " + new Date().toString() + "</p>";
console.log("Iam script.js " + new Date().toString());
}
})();
Output
You can see that the order in which i've added the script loads first.
I have an html file and I want to grab the text that is entered in the input field using javascript. I have tried a few different ways but nothing seems to be working properly. Here is the code that I have right now.
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<input type="text" id="searchingterm">
<form>
<input type="text" id="search">
</form>
<script>
$(document).ready(function(){
var searched = document.getElementById("search").value;
console.log(searched)
})
</script>
</body>
</html>
i also tried using jquery but that didnt do anything either.
basically, the problem is that you are not assigning anything to that input and also you dont have a function to trigger the search.
your code was right, you just needed to change it a little bit.
function search() {
var searched = document.getElementById("search").value;
console.log(searched)
}
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<form>
<input type="text" id="search">
</form>
<button onclick="search()"> search</button>
</body>
</html>
here having the script on the body
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<form>
<input type="text" id="search">
</form>
<button onclick="search()"> search</button>
<script>
function search() {
var searched = document.getElementById("search").value;
console.log(searched)
}
</script>
</body>
</html>