I just started learning JS, and im not understanding it that well. I am not that great at coding generally, so apologies for this really barebones and very possibly wrong website, but all I wanted to accomplish at the moment was to change the websites background color when I press the button. When I did it in <script< it worked, but when I moved it into a separate JS file, it stopped working. The error message I get is: SyntaxError: Unexpected token '}'. Expected an opening '{' at the start of a function body.
Could someone please help? Thank you in advance!
function makeRed() {
document.getElementById('temp').style.backgroundColor = 'lightsalmon';
}
let btnRed = document.getElementById = ('btnRed');
btnRed.addEventListener("click", makeRed);
body {
background-color: lightyellow;
text-align: center;
padding: 0;
margin: 0;
}
.temperature {
color: darkgoldenrod;
font-family: Optima, sans-serif;
}
input {
border: none;
border-bottom: 2px solid darkgoldenrod;
background-color: lightyellow;
width: 50px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
#header {
background: darkgoldenrod;
font-size: 20px;
color: lightyellow;
font-family: Optima, sans-serif;
}
<html>
<head>
<title>Sun tester</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="icon" href="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcdn.onlinewebfonts.com%2Fsvg%2Fimg_40038.png&f=1&nofb=1" type="image/x-icon">
</head>
<body>
<div id="header">
<h1 id="h1">Sun Tester</h1>
</div>
<div class="temperature">
<p id="temp2">Temperature:
<input type="number" id="temp"> °C</p>
</div>
<button type="button" id="btn-Red">Click Me!</button>
<script src="script.js"></script>
</body>
</html>
you are assigning both btnRed and the document.getElementById method to a String value 'btnRed' instead of actually running the getElementById method and passing it an argument "btnRed"
so just change the
let btnRed = document.getElementById = ('btnRed'); to
let btnRed = document.getElementById('btnRed');
You need to change the HTML element btn-Red to be btnRed and fix up your JavaScript... try this.
function makeRed() {
let r = document.getElementById('temp')
r.style.backgroundColor = 'lightsalmon';
}
let btnRed = document.getElementById('btnRed');
btnRed.addEventListener("click", makeRed);
body {
background-color: lightyellow;
text-align: center;
padding: 0;
margin: 0;
}
.temperature {
color: darkgoldenrod;
font-family: Optima, sans-serif;
}
input {
border: none;
border-bottom: 2px solid darkgoldenrod;
background-color: lightyellow;
width: 50px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
#header {
background: darkgoldenrod;
font-size: 20px;
color: lightyellow;
font-family: Optima, sans-serif;
}
<html>
<head>
<title>Sun tester</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="icon" href="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcdn.onlinewebfonts.com%2Fsvg%2Fimg_40038.png&f=1&nofb=1" type="image/x-icon">
</head>
<body>
<div id="header">
<h1 id="h1">Sun Tester</h1>
</div>
<div class="temperature">
<p id="temp2">Temperature:
<input type="number" id="temp"> °C</p>
</div>
<button type="button" id="btnRed">Click Me!</button>
<script src="script.js"></script>
</body>
</html>
Related
I tried to make this simple notes app, just for learning javascript. Then I got error when I tried to hit the "edit" button on this program. It was saying that marked is not a function.
My code is here:
HTML
<html>
<head>
<title>Notes App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.2.12/marked.min.js"></script>
</head>
<body>
<div class="notes">
<div class="tools">
<button class="edit"><i class="fas fa-edit"></i></button>
<button class="delete"><i class="fas fa-trash-alt"></i></button>
</div>
<div class="main hidden">
</div>
<textarea></textarea>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova&display=swap');
* {
box-sizing: border-box;
}
body {
display: flex;
flex-wrap: wrap;
background-color: #7BDAF3;
margin: 0;
font-family: 'Ibarra Real Nova', serif;
}
.notes {
background-color: #fff;
width: 400;
height: 400;
margin: 20px;
}
.notes .tools {
background-color: #9ec862;
display: flex;
justify-content: flex-end;
padding: 0.5rem;
}
.notes .tools button {
background-color: transparent;
border: none;
color: #fff;
font-size: 1.5rem;
margin-left: 0.5rem;
}
.notes .main {
height: 100%;
width: 100%;
}
.notes textarea {
outline: none;
font-family: inherit;
border: none;
height: 100%;
width: 100%;
}
.notes .hidden {
display: none;
}
Javascript
const notesEl = document.querySelector('.notes');
const editBtn = document.querySelector('.edit');
const deleteBtn = document.querySelector('.delete');
const main = notesEl.querySelector('.main');
const textArea = notesEl.querySelector('textarea');
editBtn.addEventListener('click', () => {
main.classList.toggle('hidden');
textArea.classList.toggle('hidden');
});
textArea.addEventListener("input", (e) => {
const { value } = e.target;
main.innerHTML = marked(value);
});
It supposed to show the mark when I hit the edit button. But, even without giving any input of markdown, the result is nothing. And it showed an error on the console log.
I found the problem. So that there is a bug in this version of mark, then I change the marked version to 3.0.7. And its all works fine, cause its fixed in this version.
So change the way you import it in html code:
from:
https://cdnjs.cloudflare.com/ajax/libs/marked/4.2.12/marked.min.js
to:
https://cdn.jsdelivr.net/npm/marked#3.0.7/marked.min.js
Start tag head seen but an element of the same type was already open.
also I got some other errors:
" Saw <?. Probable cause: Attempt to use an XML processing instruction in HTML. (XML processing instructions are not supported in HTML.) "
and
" No p element in scope but a p end tag seen. "
I have no clue how to fix them.
<!DOCTYPE html>
<html lang="pl">
<style>
html, body { margin: 0; padding: 0; color: black; background-color: grey;}
#strona { position: absolute; color: white}
#rects { position: relative; width: 300px; height: 125px; border: 1px solid #FF0000; color: yellow; margin: 5px; padding: 2px;}
</style>
<head>
<meta charset="UTF-8"/>
<title> site</title>
</head>
<body>
<div> <script>
function clickbutton1(){
document.getElementById("opis").innerHTML = Date();
}
</script>
</div>
<div id="strona">
<h1>test</h1>
<?php
echo "<p>data replacement</p>";
echo "<div id='rects'>
<!-- starting of the function -->
<p id='opis'> internal description </p>
<script>
document.getElementById('rects').onclick = clickbutton1;
</script>
</div>";
?>
</div>
</body>
</html>```
There were some added characters under div#strona that were interfering with how the code was being run.
In order to make the Javascript functional, add the clickbutton1() onclick function directly to the HTML element.
Below is the reformatted code with HTML/CSS/Javascript in their own respective files:
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
<head>
<meta charset="UTF-8" />
<title> site</title>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
#weemizo Yes! I added the CSS styles to a style tag and the JS into a script element. They are now both placed in the head tag.
<html>
<head>
<meta charset="UTF-8" />
<title>Site</title>
<style>
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
</style>
<script>
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
</script>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
</html>
The animations work perfectly on shapes. But audio files dont play. What might be the reason?
I added all the html, css, and javascript files for you to see.
It still doesnt let me post it, so i am extending the question. I hope someone can solve this issue. Thank you in advance. I'd be so happy for your help
var buttonColours = ["red","blue","green","yellow"];
var gamePattern = [];
function nextSequence() {
var randomNumber = Math.floor(Math.random()*4); // 0-3
var randomChosenColour = buttonColours[randomNumber];
gamePattern.push(randomChosenColour);
//1. Use jQuery to select the button with the same id as the randomChosenColour
$("#"+randomChosenColour).fadeIn().fadeOut().fadeIn();
var audio = new Audio("sounds/" + randomChosenColour + ".mp3");
audio.play();
}
nextSequence();
body {
text-align: center;
background-color: #011F3F;
}
#level-title {
font-family: 'Press Start 2P', cursive;
font-size: 3rem;
margin: 5%;
color: #FEF2BF;
}
.container {
display: block;
width: 50%;
margin: auto;
}
.btn {
margin: 25px;
display: inline-block;
height: 200px;
width: 200px;
border: 10px solid black;
border-radius: 20%;
}
.game-over {
background-color: red;
opacity: 0.8;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.pressed {
box-shadow: 0 0 20px white;
background-color: grey;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Simon</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
</head>
<body>
<h1 id="level-title">Press A Key to Start</h1>
<div class="container">
<div lass="row">
<div type="button" id="green" class="btn green">
</div>
<div type="button" id="red" class="btn red">
</div>
</div>
<div class="row">
<div type="button" id="yellow" class="btn yellow">
</div>
<div type="button" id="blue" class="btn blue">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="game.js"></script>
</body>
</html>
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>
Firstly i'll need to apologize as I'm very new to coding and this might be very easy to be solved
I need to get the name of the file and display it within the blue box. My js script's last part does not work:
var filename = e.target.value.split('\\').pop();
$("#label_span").text(filename);
The message below was displayed when I tried it using the codesnippet
{
"message": "Uncaught ReferenceError: e is not defined",
"filename": "https://stacksnippets.net/js",
"lineno": 109,
"colno": 19
}
Thanks in advance!
$(document).ready(function() {
$("#file").on("change", function() {
var files = $(this)[0].files;
if (files.length >= 2) {
$("#label_span").text(files.length + " files ready to upload");
} else {
var filename = e.target.value.split('\\').pop();
$("#label_span").text(filename);
}
});
});
body {
font-family: 'Varela Round', sans-serif;
font-family: 16px;
}
h1 {
color: #3c4954;
text-align: center;
margin-top: 100px;
font-size: 36px;
}
p {
color: #a4b0b9;
line-height: 200%;
}
* {
box-sizing: border-box;
}
footer {
position: absolute;
width: 100%;
bottom: 20px;
}
.form-div {
margin-top: 100px;
}
.input-label {
background: #009688;
color: #fff;
padding: 30px;
cursor: pointer;
}
.input-label:hover {
background: #26a69a;
cursor: white;
cursor: pointer;
padding: 30px;
transition: .2s;
}
.fa {
margin-right: 10px;
}
#file {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html>
<head>
<title>Custom Input</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="Test_Impor.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body align="center">
<header>
<h1>Custom Input</h1>
</header>
<div class="form-div">
<form>
<label for="file" class="input-label">
<i class = "fa fa-upload"></i>
<span id = "label_span">Select files to upload</span>
</label>
<input id="file" type="file" multiple="true" />
</form>
</div>
<script src="Test_Import.js"></script>
</body>
</html>
Each element of the files array is an object with a name property. So just access the first element of the array and get its name.
You don't need to use split(), as it just contains the name, not the full path.
And instead of $(this)[0] you can just use this.
$(document).ready(function() {
$("#file").on("change", function() {
var files = this.files;
if (files.length >= 2) {
$("#label_span").text(files.length + " files ready to upload");
} else if (files.length == 1) {
var filename = files[0].name;
$("#label_span").text(filename);
} else {
$("#label_span").text("Select files to upload");
}
});
});
body {
font-family: 'Varela Round', sans-serif;
font-family: 16px;
}
h1 {
color: #3c4954;
text-align: center;
margin-top: 100px;
font-size: 36px;
}
p {
color: #a4b0b9;
line-height: 200%;
}
* {
box-sizing: border-box;
}
footer {
position: absolute;
width: 100%;
bottom: 20px;
}
.form-div {
margin-top: 100px;
}
.input-label {
background: #009688;
color: #fff;
padding: 30px;
cursor: pointer;
}
.input-label:hover {
background: #26a69a;
cursor: white;
cursor: pointer;
padding: 30px;
transition: .2s;
}
.fa {
margin-right: 10px;
}
#file {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html>
<head>
<title>Custom Input</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="Test_Impor.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body align="center">
<header>
<h1>Custom Input</h1>
</header>
<div class="form-div">
<form>
<label for="file" class="input-label">
<i class = "fa fa-upload"></i>
<span id = "label_span">Select files to upload</span>
</label>
<input id="file" type="file" multiple="true" />
</form>
</div>
<script src="Test_Import.js"></script>
</body>
</html>
You need to provide e to your event callback function
$("#file").on("change", function(e) {...}