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>
Related
I'm working with fullPage.js and I wanted to make some text sit around the top. I expected margin-right and margin-top to work and I even tried vertical-align. They didn't work.
Here is my code.
.s1a {
background: url(/https://www.well-played.com.au/wp-content/uploads/2020/09/ps5-play-has-no-limits-video-thumb-01-en-11jun20.jpg);
background-size: cover;
}
.s1a h1 {
text-align: left;
margin-left: 2em;
vertical-align: top;
font-size: 4rem;
}
<!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="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="fullPage">
<div class="section s1a">
<h1>At **Removed**, we truly believe that</h1>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
new fullpage('#fullPage', {
autoScrolling: true
})
</script>
</body>
</html>
try
position: absolute;
left: x%;
top: y%;
where x and y are % from left and top
Floating the text to left may be helpful in this case.
*{
margin=0;
padding=0;
}
#fullPage {
background: url('https://www.well-played.com.au/wp-content/uploads/2020/09/ps5-play-has-no-limits-video-thumb-01-en-11jun20.jpg');
background-size: cover;
}
#fullPage h1 {
float : left;
font-size: 2rem;
}
<!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="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="fullPage">
<h1>At **Removed**, we truly believe that</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
new fullpage('#fullPage', {
autoScrolling: true
})
</script>
</body>
</html>
#Make element position absolute with top and left value#
.s1a {
background: url(/https://www.well-played.com.au/wp-content/uploads/2020/09/ps5-play-has-no-limits-video-thumb-01-en-11jun20.jpg);
background-size: cover;
}
.s1a h1 {
position: absolute;
top: 0;
left: 0;
font-size: 4rem;
}
<!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="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="fullPage">
<div class="section s1a">
<h1>At **Removed**, we truly believe that</h1>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
new fullpage('#fullPage', {
autoScrolling: true
})
</script>
</body>
</html>
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>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I don't know why anime.js doesn't work on my computer. I have added the CDN in my HTML file, but it still won't work, why?
"use strict";
anime({
targets: '#ball',
translateX: 250
});
body{
margin:0;
height: 100vh;
}
#ball{
border: black solid medium;
background-color: cyan;
width: 2%;
height: 2%;
border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<link rel="stylesheet" href="test.css">
<title></title>
</head>
<body>
<div id="ball"></div>
</body>
<script src="test.js"></script>
<script> src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.js"</script>
</html>
Like #ggorlen and I said, your brackets for the second script tag were incorrect.
"use strict";
anime({
targets: '#ball',
translateX: 250
});
body{
margin:0;
height: 100vh;
}
#ball{
border: black solid medium;
background-color: cyan;
width: 2%;
height: 2%;
border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<link rel="stylesheet" href="test.css">
<title></title>
</head>
<body>
<div id="ball"></div>
</body>
<script src="test.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.js"></script>
</html>
Try this
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<link rel="stylesheet" href="test.css">
<title></title>
</head>
<body>
<div id="ball"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.js"></script>
<script src="test.js"></script>
</body>
</html>
Your syntax for the script tag to the anime.js file was incorrect, and your test.js needs to be referenced after it in order for the anime() function to be defined.
Add this link in your code https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js
var animation = anime({
targets: '#ball',
translateX: 250
});
var animation = anime.js;
var anime = animation;
var animation = anime.js;
var ball = anime.js;
var animation = anime.js;
var anime = animation;
var anime = anime.js;
var anime = animation;
var animation = animation;
var anime = animation;
var animation = animation;
var animation = anime.js;
var anime = anime.js;
var animaton = anime.js;
var anime = animation;
var anime = anime.js;
body{
margin:0;
height: 100vh;
}
#ball{
border: black solid medium;
background-color: cyan;
width: 2%;
height: 2%;
border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<link rel="stylesheet" href="test.css">
<title></title>
</head>
<body>
<div id="ball"></div>
</body>
</html>
<script src="test.js"></script>
<script>https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js</script>
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>
attempting to loop through a div in the DOM and dynamically render it 300 times. Having trouble accessing the HTML within the styled element.
Code as follows:
Current Render
JavaScript File:
var amount = 5;
for(var i = 0; i < amount; i++){
var new_div = document.createElement("div");
new_div.className = "hello";
document.body.appendChild(new_div).innerHTML;
console.log("This is repeat " + i)
}
HTML File:
<!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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="hello">
<p>
Hello World!
</p>
</div>
<script src="app.js"></script>
</body>
</html>
CSS Style Sheet:
.hello {
width: 80%;
margin: 0 auto;
padding: 20px;
text-align: center;
border-style: outset;
border-width: 5px;
border-color: #d36135;
}
I want to be able to render the first div multiple times as it is exactly styled.
Why are you accessing innerHTML at the end of the append method? There is no need for that and that causes a problem.
Working example:
var amount = 5;
for(var i = 0; i < amount; i++){
var new_div = document.createElement("div");
new_div.className = "hello";
document.body.appendChild(new_div);
console.log("This is repeat " + i)
}
.hello {
width: 80%;
margin: 0 auto;
padding: 20px;
text-align: center;
border-style: outset;
border-width: 5px;
border-color: #d36135;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="hello">
<p>
Hello World!
</p>
</div>
<script src="app.js"></script>
</body>
</html>
Your code is working fine but it seems you want to clone the first element
var amount = 5;
for (var i = 0; i < amount; i++) {
let elem = document.getElementById("hello").cloneNode(true);
elem.id = 'hello_' + i;
document.body.appendChild(elem);
}
.hello {
width: 80%;
margin: 0 auto;
padding: 20px;
text-align: center;
border-style: outset;
border-width: 5px;
border-color: #d36135;
}
<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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="hello" id='hello'>
<p>
Hello World!
</p>
</div>
<script src="app.js"></script>
</body>
</html>