Attempting a vanilla js solution to focus .btn-1 by default on page load.
Can't figure out why I keep getting this error : index.js:2 Uncaught TypeError: document.getElementsByClassName(...).focus is not a function at window.onload (index.js:2)
Anyone have thoughts on this please?
index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<button class="btn btn-1">1</button>
<button class="btn btn-2">2</button>
<button class="btn btn-3">3</button>
<script src="index.js" async defer></script>
</body>
</html>
index.css :
.btn {
/* background-color: #4caf50; Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
margin: 1em;
}
.btn:hover {
background-color: grey;
}
.btn:focus {
background-color: blue;
}
index.js :
window.onload = function () {
document.getElementsByClassName('btn-1').focus();
};
The getElementsByClassName returns an array you can do this if you do like this
window.onload = function () {
document.getElementsByClassName('btn-1')[0].focus();
};
or you can use querySelector instead which targets the first element on the document
window.onload = function () {
document.querySelector('.btn-1').focus();
};
Have you tried the autofocus attribute you can give to the button elements.
Refer the link
<button type="button" autofocus>Click Me!</button>
Related
I am trying to make a search bar type of thing , by seeing youtube video : https://youtu.be/TlP5WIxVirU?t=471
but got stuck don't know why
the stack overflow is executing and getting the desired output but my pc doesnot
what could be the reason ??
I want to get the output as : Output
but while I execute this code, I'm getting the error as :
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'content')
at script.js:7:39
please help me
const userCardTemplate = document.querySelector("[data-user-template]")
fetch("https://jsonplaceholder.typicode.com/users").then(res => res.json()).then(data => {
const card = userCardTemplate.content.cloneNode(true).children[0]
console.log(card)
})
.search-wrapper{
display: flex;
flex-direction: column;
}
input {
font-size: 1rem;
}
.user-cards {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
gap: .25 re,;
margin-top: 1rem;
}
.card {
border: 1px solid black;
background-color: white;
padding: .5 rem;
}
.card .header{
margin-bottom: .25 rem;
}
.card .body {
font-size: .8rem;
}
.hide{
display: none;
}
<!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>Search Engine</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="search-wrapper">
<label for="search">Search Users</label>
<input type="search" id ="search">
</div>
<div class="user-cards" >
</div>
<template data-user-template>
<div class="card">
<div class="header">
</div>
<div class="body">
</div>
</div>
</template>
</body>
</html>
The error says exactly what you needed to read. userCardTemplate was not found in the DOM. The reason being the moment in which you trigger the <script> execution. And that's in head. At the moment the parser stopped to read the current DOM there was no such element.
Instead you have two solutions:
Use the defer attribute:
<script src="script.js" defer></script>
in order to defer your script execution, or
place the SCRIPT right before the closing BODY tag:
<script src="script.js"></script>
</body>
I have linked my HTML to jquery but when I run it in Microsoft edge, it outputs
"Help.js:1 Uncaught ReferenceError: $ is not defined
at Help.js:1
(anonymous) # Help.js:
Code:
$(document).ready(function(){
$(".navBar").hover(function(){
$(this).css("border","2px solid black")
})
})
navBar{
display: flex;
position: sticky;
top:0;
padding: 20px;
border: none;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title{
color: black;
font-family: monospace;
}
<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="style.css">
<title>A Random Website</title>
</head>
<body>
<script src="style.js"></script>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<div class="navBar">
<div>
<h1 id="Title">SomeRandomWebsite</h1>
</div>
</div>
</body>
</html>
It is because you're using $ before jQuery has loaded.
// Instead of:
//...
<script src="style.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
//...
// Use this:
// ...
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="style.js"></script>
// ...
And move those script tags to the line before the closing </body> tag. i.e:
// ...
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="style.js"></script>
</body>
</html>
Add scripts in your head tag and first load jquery and then your custom style.js file.
Also, add the defer attribute to your script.
Defer attribute when present, specifies that the script is executed when the page has finished parsing. You can read more about defer
$(document).ready(function() {
$(".navBar").hover(function() {
$(this).css("border", "2px solid black")
})
})
.navBar {
display: flex;
position: sticky;
top: 0;
padding: 20px;
border: none;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title {
color: black;
font-family: monospace;
}
<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>A Random Website</title>
<script src="https://code.jquery.com/jquery-latest.js" defer></script>
<script src="style.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navBar">
<div>
<h1 id="Title">SomeRandomWebsite</h1>
</div>
</div>
</body>
</html>
This question already has answers here:
Scroll to the top of the page using JavaScript?
(49 answers)
Closed 2 years ago.
So I have the following in my HTML page:
and i intentionally made it so that the "overflow" happens which results in the scrollbar at the right.
So i made a button called "Click to scroll up". So what i wanted was that everytime we click that button, the document would immediately scroll all the way up. Which means if I were to navigate all the way down, and click the button, it would bring me all the way up.
I looked up and there's a method "scrollTop" but it doesn't seemed to work. Would appreciate some help on this.
document.getElementById("scrollup").addEventListener("click", scrollUpmost);
function scrollUpmost() {
$(document).scrollTop();
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.container {
border: 1px solid orange;
}
.big_div {
border: 1px solid black;
height: 1200px;
}
#scrollup {
margin-top: 900px;
}
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class = "big_div">
<button id = "scrollup">Click to scroll up</button>
</div>
</div>
<script src = "test.js"></script>
</body>
</html>
$("#scrollup").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.container {
border: 1px solid orange;
}
.big_div {
border: 1px solid black;
height: 1200px;
}
#scrollup {
margin-top: 900px;
}
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class = "big_div">
<button id = "scrollup">Click to scroll up</button>
</div>
</div>
<script src = "test.js"></script>
</body>
</html>
Please try this code
I'm currently trying to create a spelling quiz as part of a project website using HTML, CSS and JScript.
The concept is: the user is shown a word with two letters missing (shown by the underscores). They then select which answer is right (the three button options) and an alert message should come back on the window to say if they are correct or incorrect.
My idea behind the code I wrote so far was to have an event listener on the button that when clicked would trigger the alert either saying correct or incorrect if I have programmed it to be so.
My code isn't working, could anyone help me?
var aChoice = document.getElementById("S1");
aChoice.addEventLister("Click", C1)
function C1 ()
{
alert("Correct");
}
#QuizBod {
background-color: #ffff80;
}
#QTitle {
text-align: center;
font-family: 'Langar', cursive;
font-weight: bold;
font-size: 30pt;
color: black;
text-decoration: underline;
text-decoration-color: #FFBF00;
}
#S1 {
background-color: white;
color: black;
font-size: 25pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: inline;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<!--Mobile Compatibility-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Style Sheet, Google Font Link, Page Title-->
<head>
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
<title>Spelling Test</title>
</head>
<body id="QuizBod">
<h2 id="QTitle">Spelling Quiz</h2>
<p id="MQ1">C h _ _ r</p>
<label class ="Albl">Answer:
<button id="S1">a i</button>
<button id="S1">i a</button>
<button id="S1">e i</button>
</label>
<script src="SpellTest.js"></script>
</body>
</html>
(More code I was intending to write on Javascript here for logic purposes.)
var bChoice = document.getElementById("S2");
bChoice.addEventLister("Click", C2)
function C2 ()
{
alert("Incorrect");
}
var cChoice = document.getElementById("S3");
cChoice.addEventLister("Click", C2)
function C2 ()
{
alert("Incorrect");
}
1.You cannot have more than one id="S1"! Since the id attribute is unique for the entire html document. In your case, it is better to use the class. Since there may be more buttons with answer options, like this:
<label class="Albl">Answer:
<button class="btn">a i</button>
<button class="btn">i a</button>
<button class="btn">e i</button>
</label>
2.Now on js ... I corrected your code. Also, you need to change the method of accessing elements (buttons). Like this:
var aChoice = document.querySelector(".btn");
3.Now everything is ready, but not completely! You need the logic for determining the correctness of the choice of the option by buttons.
var aChoice = document.querySelectorAll(".btn");
aChoice.forEach(function(aChoice_current, index) {
aChoice_current.addEventListener('click', function(){
if (index == 0) {
console.log('The answer is correct! :)');
} else {
console.log('The answer is not correct! :(');
}
})
})
#QuizBod {
background-color: #ffff80;
}
#QTitle {
text-align: center;
font-family: 'Langar', cursive;
font-weight: bold;
font-size: 30pt;
color: black;
text-decoration: underline;
text-decoration-color: #FFBF00;
}
.btn {
background-color: white;
color: black;
font-size: 25pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: inline;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<!--Mobile Compatibility-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Style Sheet, Google Font Link, Page Title-->
<head>
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
<title>Spelling Test</title>
</head>
<body id="QuizBod">
<h2 id="QTitle">Spelling Quiz</h2>
<p id="MQ1">C h _ _ r</p>
<label class="Albl">Answer:
<button class="btn">a i</button>
<button class="btn">i a</button>
<button class="btn">e i</button>
</label>
<script src="SpellTest.js"></script>
</body>
</html>
So basically like i'm trying to make text appear using buttons but I did everything, I tried changing the id a few times like myFunction() or myButton() but none work. I believe the id has nothing to do with this and repl.it is stupid. If it does work please help me please ok
I've tried using different ids as said before, I tried putting ;s and no ;s and I even tried asking supercommunity but no one answered.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>sunny's website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
.button {
color:white;
background-color:green;
padding:10px 10px;
cursor: pointer;
}
.button:hover {
background-color: black;
}
.button:active {
cursor: help;
}
</style>
</head>
<body>
<script src="script.js"></script>
<h1>welcome<h1>
<button onclick="dingwun()" class="button">click me!</button>
<h2>click the thing to reveal!:</h2>
<p id="vari"></p>
<script>
function dingwun() {
var x = document:getElementById("vari");
x.innerHTML = "coolio";
}
</script>
</body>
</html>
You have a typo:
document:getElementById("vari");
Should be:
document.getElementById("vari");
NOTES:
Don't use .innerHTML when the string doesn't contain any HTML as .innerHTML has performance and security implications. Instead, use .textContent.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>sunny's website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
.button {
color:white;
background-color:green;
padding:10px 10px;
cursor: pointer;
}
.button:hover {
background-color: black;
}
.button:active {
cursor: help;
}
</style>
</head>
<body>
<script src="script.js"></script>
<h1>welcome<h1>
<button onclick="dingwun()" class="button">click me!</button>
<h2>click the thing to reveal!:</h2>
<p id="vari"></p>
<script>
function dingwun() {
var x = document.getElementById("vari");
x.textContent = "coolio";
}
</script>
</body>
</html>
There was a typo in command document:getElementById("vari"), it should be a fullstop at the place of semicolon. document.getElementById("vari")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>sunny's website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
.button {
color:white;
background-color:green;
padding:10px 10px;
cursor: pointer;
}
.button:hover {
background-color: black;
}
.button:active {
cursor: help;
}
</style>
</head>
<body>
<script src="script.js"></script>
<h1>welcome<h1>
<button onclick="dingwun()" class="button">click me!</button>
<h2>click the thing to reveal!:</h2>
<p id="vari"></p>
<script>
function dingwun() {
var x = document.getElementById("vari");
x.innerHTML = "coolio";
}
</script>
</body>
</html>
You actually use : in document:getElementById("vari") you have to use . like document.getElementById("vari"). Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>sunny's website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
.button {
color:white;
background-color:green;
padding:10px 10px;
cursor: pointer;
}
.button:hover {
background-color: black;
}
.button:active {
cursor: help;
}
</style>
</head>
<body>
<script src="script.js"></script>
<h1>welcome<h1>
<button onclick="dingwun()" class="button">click me!</button>
<h2>click the thing to reveal!:</h2>
<p id="vari"></p>
<script>
function dingwun() {
var x = document.getElementById("vari");
x.innerHTML = "coolio";
}
</script>
</body>
</html>