We Keep Coding

html5 range slider: the output label doesn't reflect chosen value with custom JavaScript code

I've used a code from this answer to style HTML5 input in my GRAV CMS website.
The rendered part of HTML markup:
<div class="form-data" data-grav-field="range" data-grav-disabled="" data-grav-default="40">
<div class="form-input-wrapper ">
<input name="data[space]" value="40" type="range" style="display: inline-block;vertical-align: middle;" oninput="space_output.value = space.value" min="40" max="350" step="10" class="form-input " id="space" required="required">
<output name="data[space]" id="space_output" style="display: inline-block;vertical-align: baseline;padding: 0 0.5em 5px 0.5em;"> 40 </output>
</div>
</div>
The JS code is taken from the answer above and placed in at the beginning of my custom.js file:
document.getElementById("space").oninput = function() {
var value = (this.value-this.min)/(this.max-this.min)*100
this.style.background = 'linear-gradient(to right, #eec170 0%, #eea624 ' + value + '%, #839788 ' + value + '%, #a6d86c 100%)'
};
So, this part works without any flaws.
The problem:
With JS code the behaviour of input is incorrect, once the page is loaded background color is not reflecting the ball position of the default position 40, because it's not the center.
Once the slider position is changed, the background colors are changed depending on the slider position.
That's the lesser problem, but the major problem is that the <output> field no longer displays the new values. It's has been stuck to 40.
How could it be fixed?

Try this example. I have added one more (hidden) input for calculate range and wrapped it with a form tag to get the value from the output. I also added styles and refactored the gradient calculation to javascript.
document.addEventListener('DOMContentLoaded', function() {
const slider = document.getElementById('range');
// Calculate gradient persent (0% - 100%)
const calcGradientPersent = value => (100 * value) / 360;
// Default value when load page
const initValue = slider.value;
let persent = calcGradientPersent(initValue);
// Set default inline style
slider.style.background = `linear-gradient(to right, #eec170 0%, #eea624 ${persent}%, #839788 ${persent}%, #a6d86c 100%)`;
// Input Range handler
slider.addEventListener('input', event => {
// Get value from input
const value = event.target.value;
persent = calcGradientPersent(value);
// Update inline style
slider.style.background = `linear-gradient(to right, #eec170 0%, #eea624 ${persent}%, #839788 ${persent}%, #a6d86c 100%)`;
});
});
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input[type='range'] {
appearance: none;
border-radius: 1rem;
}
input[type='range']:focus {
outline: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 100%;
height: 0.4rem;
cursor: pointer;
border-radius: 1rem;
border: 1px solid #eea624;
}
input[type='range']::-webkit-slider-thumb {
height: 1rem;
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid gray;
background: #d8d7f3;
cursor: pointer;
appearance: none;
margin-top: -0.35rem;
}
<div class="form-data" data-grav-field="range" data-grav-disabled="" data-grav-default="40">
<form oninput="result.value=parseInt(range.value)+parseInt(step.value)" class="form-input-wrapper">
<input name="range" value="40" type="range" style="display: inline-block; vertical-align: middle" min="0" max="350" step="10" class="form-input" id="range" required="required" />
<input type="number" id="step" value="0" hidden />
<output name="result" id="space_output" for="range step" style="display: inline-block; vertical-align: baseline; padding: 0 0.5em 5px 0.5em">
40
</output>
</form>
</div>

How can I change language on placeholder of a input tag?

I wanted to add a translate toggle button which will translate between two language of a form.
I can select the html tags but how can I select placeholder inside input tag. I've user document.querySelector to select the custom classes I've added only for chagening language. I've also added custom class to input field but couldn't be able to change grab the placeholder text.
here is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>language switch using JavaScript</title>
<link rel="stylesheet" href="./main.css">
</head>
<style>
body {
font-family: Roboto, Helvetica, sans-serif;
font-size:20px;
background-color: black;
}
* {
box-sizing: border-box;
}
/* Add padding to containers */
.container {
padding: 16px;
background-color: white;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Overwrite default styles of hr */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a style for the submit button */
.registerbtn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
font-size: 22px;
}
.registerbtn:hover {
opacity: 1;
}
/* Add a blue text color to links */
a {
color: dodgerblue;
}
/* Set a grey background color and center the text of the "sign in" section */
.signin {
background-color: #f1f1f1;
text-align: center;
}
</style>
<body>
<div class="container">
<div class="langWrap">
EN
<a href="#" language='bangla'>BN</a>
</div>
<div class="content">
<form action="">
<div class="container">
<h1 id="h1title" class="lTitle">Register</h1>
<p class="fillUpInstruction">Please fill in this form to create an account.</p>
<hr>
<label for="email" class="emailLabel"><b>Email</b></label>
<input type="text" placeholder="Enter Email" class="emailPlaceHolder" name="email" id="email" required>
<label for="psw" class="passwordLabel"><b>Password</b></label>
<input type="password" placeholder="Enter Password" class="passwordPlaceHolder" name="psw" id="psw" required>
<label for="psw-repeat" class="repeatPasswordLabel"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required>
<hr>
<p class="agreementText">By creating an account you agree to our Terms & Privacy
</p>
Terms & Privacy.
<button type="submit" class="registerbtn">Register</button>
</div>
<div class="container signin ">
<p class="questionForExistingAccount">Already have an account?</p>
Sign in.
</div>
</form>
</div>
</div>
</body>
</html>
Here is my script to change language
<script>
const langEl = document.querySelector('.langWrap');
const link = document.querySelectorAll('a');
const lTitle = document.querySelector('.lTitle');
const fillUpInstruction = document.querySelector('.fillUpInstruction');
const emailLabel = document.querySelector('.emailLabel');
const emailPlaceHolder = document.querySelector('.emailPlaceHolder');
const passwordLabel = document.querySelector('.passwordLabel');
const passwordPlaceHolder = document.querySelector('.passwordPlaceHolder');
const repeatPasswordLabel = document.querySelector('.repeatPasswordLabel');
const questionForExistingAccount = document.querySelector('.questionForExistingAccount');
const agreementText = document.querySelector('.agreementText');
const termsPolicy = document.querySelector('.termsPolicy');
const registerbtn = document.querySelector('.registerbtn');
const redirectToExistingAccount = document.querySelector('.redirectToExistingAccount');
link.forEach(el => {
el.addEventListener('click', () => {
langEl.querySelector('.active').classList.remove('active');
el.classList.add('active');
const attr = el.getAttribute('language');
lTitle.textContent = data[attr].lTitle;
fillUpInstruction.textContent = data[attr].fillUpInstruction;
emailLabel.textContent = data[attr].emailLabel;
emailPlaceHolder.textContent = data[attr].emailPlaceHolder;
passwordLabel.textContent = data[attr].passwordLabel;
passwordPlaceHolder.placeholder = data[attr].passwordPlaceHolder;
repeatPasswordLabel.textContent = data[attr].repeatPasswordLabel;
questionForExistingAccount.textContent = data[attr].questionForExistingAccount;
agreementText.textContent = data[attr].agreementText;
termsPolicy.textContent = data[attr].termsPolicy;
registerbtn.textContent = data[attr].registerbtn;
redirectToExistingAccount.textContent = data[attr].redirectToExistingAccount;
});
});
var data = {
"english":
{
"lTitle": "Register",
"fillUpInstruction": "Please fill in this form to create an account.",
"emailLabel": "Email",
// "emailPlaceHolder": "Enter Email",
"passwordLabel": "Enter Password",
"passwordPlaceHolder": "Enter Password",
"repeatPasswordLabel": "Repeat Password",
"questionForExistingAccount": "Already have an account?",
"redirectToExistingAccount": "Sign In",
"agreementText": "By creating an account you agree to our",
"termsPolicy": "Terms & Privacy",
"registerbtn": "Register",
},
"bangla":
{
"lTitle": "নিবন্ধন",
"fillUpInstruction": "দয়া করে অ্যাকাউন্টটি তৈরি করতে এই ফর্মটি পূরণ করুন.",
"emailLabel": "ইমেইল",
"passwordLabel": "পাসওয়ার্ড লিখুন",
"passwordPlaceHolder": "পাসওয়ার্ড লিখুন",
"repeatPasswordLabel": "আবারও পাসওয়ার্ড লিখুন ",
"questionForExistingAccount": "ইতিমধ্যে একটি সদস্যপদ আছে? ",
"redirectToExistingAccount": "সাইন ইন ",
"agreementText": "একটি অ্যাকাউন্ট তৈরি করে আপনি আমাদের শর্তাবলী এবং গোপনীয়তার সাথে সম্মত হবেন ।",
"termsPolicy": "শর্তাবলী এবং গোপনীয়তা",
"registerbtn": "নিবন্ধন",
} ,
}
</script>

I can update your placeholder in this manner using dev tools console:
var attr = "bangla"
emailText = document.querySelector('#email')
emailText.placeholder = data.bangla.emailLabel

javascript multiple field creation issue on limit

i have added button that creates multiple year i want to stop creation of field when number of year is 10. how can i stop this. on year 10?
also i want to disable button once year 10 field is created.
let i = 2;
document.getElementById('add-new-person').onclick = function () {
let template = `
<h3>Year ${i}:</h3>
<p>
<input name="people[${i}][first_name]">
</p>
`;
let container = document.getElementById('people-container');
let div = document.createElement('div');
div.innerHTML = template;
container.appendChild(div);
i++;
}
body {
padding: 2em;
}
[type=submit] {
padding: 0.5em 2em;
}
.add-new-person {
background: #6688dd;
border-radius: 0.25em;
color: #fff;
display: inline-block;
padding: 0.5em;
text-decoration: none;
}
<form method="post">
<div id="people-container">
<h3>Year 1:</h3>
<p>
<input name="people[1][first_name]">
</p>
</div>
Add! new year
<p>
<input type="submit" value="Save">
</p>
</form>

You can use button element instead of a tag. This works better then an a tag. Also, to prevent default behavior of button click we use preventDefault() method. So our page is not reloading each time we click.
To disable your button just set the button attr to disabled to true when the limit reaches years > 10
I have added comments in each line to reflects what happening as well.
Run snippet below to see it working.
//Button
let button = document.getElementById('add-new-person')
//Limit of elements
let i = 2;
//Click function
button.onclick = function(e) {
//Disable default behabviour
e.preventDefault()
//Appending extra years
let template = `
<h3>Year ${i}:</h3>
<p>
<input name="people[${i}][first_name]">
</p>`;
//Checking if the limit is > 10 then we are disabling the button
if (i > 10) {
//Disable button
button.disabled = true;
console.log('Button Disabled')
//Return false
return;
} else {
let container = document.getElementById('people-container');
let div = document.createElement('div');
div.innerHTML = template;
container.appendChild(div);
i++;
}
}
body {
padding: 2em;
}
[type=submit] {
padding: 0.5em 2em;
}
.add-new-person {
background: #6688dd;
border-radius: 0.25em;
color: #fff;
display: inline-block;
padding: 0.5em;
text-decoration: none;
}
<form method="post">
<div id="people-container">
<h3>Year 1:</h3>
<p>
<input name="people[1][first_name]">
</p>
</div>
<button id="add-new-person" class="add-new-person">Add! new year</button>
<p>
<input type="submit" value="Save">
</p>
</form>

I hope it is useful
let i = 2;
document.getElementById('add-new-person').onclick = function () {
//check it if i<=10 do it
if(i <=10){
let template = `
<h3>Year ${i}:</h3>
<p>
<input name="people[${i}][first_name]">
</p>
`;
let container = document.getElementById('people-container');
let div = document.createElement('div');
div.innerHTML = template;
container.appendChild(div);
i++;
}
//if i>10 add deactive class to element
else{
document.getElementById("add-new-person").classList.add("Deactive");
}
}
body {
padding: 2em;
}
[type=submit] {
padding: 0.5em 2em;
}
.add-new-person {
background: #6688dd;
border-radius: 0.25em;
color: #fff;
display: inline-block;
padding: 0.5em;
text-decoration: none;
}
.add-new-person.Deactive{
background: gray;
cursor: not-allowed;
}
<form method="post">
<div id="people-container">
<h3>Year 1:</h3>
<p>
<input name="people[1][first_name]">
</p>
</div>
Add! new year
<p>
<input type="submit" value="Save">
</p>
</form>

Clear objects properties by button click

There are 5 boxes, which can be changed from 'white'<->'yellow' colors by mouse events (mouseover, mouseout and click). There is also a blue area with text displaying the level of the clicked box.
After clicking into the third box, I got 'hard level' text in blue area and 3 boxes color in yellow.
What I need is to return it to the default level ('easy level' and first box in yellow only) by clicking the reset button.
I have been trying do this like this , but it isn't working:
resetBtn = document.querySelector('#update');
and eventlistener:
resetBtn.addEventListener('click', highlightStars(`#star1`), true)
Here is an example:
window.addEventListener('DOMContentLoaded', changeStars, false);
const resetBtn = document.querySelector('#update');
/* Change level of the game depending on user choice */
function changeStars() {
/* Displaying level text inside blue box */
const updateAltText = currentLevelIndex => {
let levelText = document.querySelector('#level-text');
/* 'currentLevelIndex + 1' replaces event 'currentElement' */
levelText.textContent = document.querySelector(`#star${currentLevelIndex + 1}`).alt;
}
/* Captcha level number - default is 1 */
const getNumber = str => Number(str.match(/\d+/)[0]) || 1;
/* Star index is always one number lower than level number (indexing rules) */
const getStarIndex = event => getNumber(event.target.id) - 1;
let stars = document.querySelectorAll('.star');
const handleStarClick = event => {
/* FIRST - blocking possibility to change star behaviour by mouse events */
gameLevel.removeEventListener('mouseover', highlightStars);
gameLevel.removeEventListener('mouseout', highlightStars);
/* SECOND - making all needed star with yellow color */
const stars = document.querySelectorAll('.star');
for (let i = 0; i <= getStarIndex(event); i++) {
stars[i].classList.add('yellow');
}
};
const highlightStars = event => {
const starIndex = getStarIndex(event);
updateAltText(starIndex);
for (let i = 1; i <= starIndex; i++) {
const star = document.querySelector(`#star${i + 1}`);
star.classList.toggle('yellow');
}
};
// resetBtn.addEventListener('click', highlightStars(`#star1`), true);
resetBtn.addEventListener('click', updateAltText(0), true);
const gameLevel = document.querySelector('.game-level');
gameLevel.addEventListener("mouseover", highlightStars);
gameLevel.addEventListener("mouseout", highlightStars);
gameLevel.addEventListener('click', handleStarClick, {once: true});
}
.stars {
display: flex;
margin: 10px auto;
width: 500px;
}
input[type='image'] {
width: 60px;
height: 60px;
border: thin solid black;
}
.yellow {
background-color: yellow;
}
.game-level {
display: flex;
width: 300px;
height: 100%;
}
.level-block {
display: flex;
width: 200px;
margin-left: 10px;
justify-content: center;
align-items: center;
border: 1px solid hsl(217, 86%, 50%);
border-radius: 25px;
background-color: hsl(212, 29%, 80%);
}
.level-block > span {
font-size: 18px;
}
.reset {
width: 80px;
height: 80px;
}
<div class="stars">
<div class="game-level">
<input type="image" class="star yellow" id="star1" src="" width="60" alt="easy level">
<input type="image" class="star" id="star2" src="" width="60" alt="normal level">
<input type="image" class="star" id="star3" src="" width="60" alt="hard level">
<input type="image" class="star" id="star4" src="" width="60" alt="very hard level">
<input type="image" class="star" id="star5" src="" width="60" alt="impossible level">
</div>
<div class="level-block">
<span id="level-text">Easy level</span>
</div>
</div>
<input type="button" class="reset" id="update" value="RESET">

The following demo uses JavaScript for click events only, all mouse events (ie hover) are pure CSS. The reset behavior simply removes .active class on all buttons then adds .active class to the first button. Instead of the first button title being displayed after a reset -- the reset button title: "Game Reset" is displayed, it might be a little confusing for users if there's no confirmation of a reset. Other behavior is included in demo that is logical and consistent such as toggling, hovering to a temporary state and clicking for a persistent state etc. Details are commented in demo.
// Reference the form
const stars = document.forms.stars;
/*
Register the form to the click event -- when a click occurs anywhere on or within the form, callback function twinkle() is
called
*/
stars.onclick = twinkle;
/**
//A -- twinkle passes a reference to the Event Object... (e)
//B1 - Two Event Object properties are used to reference:
The tag the was clicked by user: event.target
The tag registered to the event: event.currentTarget
//B2 - The HTMLFormElement property: .elements collects all form
controls into a Live HTML Collection (aka NodeList)
//C -- ui.star is a Collection of form controls with [name=star]
The brackets [] and spread operator ... converts the
NodeList into an Array
//D -- Reference the message tag. If the clicked tag was the reset
button -- for...of loop iterates through each [name=star]
and removes the class .active from all [name=star]
//E1 - Next add .active class to the default button
//E2 - Set the legend.message text to the value of clicked button
[title] attribute...
~~~~~~~
//F -- ...But if a button.star was clicked, a check to verify if
clicked tag has the .active class -- then a for...of
loop identical to the one described in line D is used to
remove any .active class.
//G -- After there are no .active, the Boolean declared in line F
determines whether the clicked tag gets the .active class
and its [title] attribute displayed or not
*/
function twinkle(e) {
const active = e.target;
const ui = e.currentTarget.elements;
const starZ = [...ui.star];
const msg = document.querySelector(".message");
if (active.matches("#clear")) {
for (let star of starZ) {
star.classList.remove("active");
}
ui.star1.classList.add('active');
msg.textContent = active.title;
} else if (active.matches(".star")) {
let status = active.classList.contains("active");
for (let star of starZ) {
star.classList.remove("active");
}
if (!status) {
active.classList.add("active");
msg.textContent = active.title;
} else {
active.classList.remove("active");
msg.textContent = "";
}
}
return false;
}
:root {
font: 400 small-caps 2.5vw/1 Arial
}
.levels {
display: table;
width: 96%;
height: auto;
border: 1px solid hsl(217, 86%, 50%);
border-radius:4px;
}
.message {
display: table-caption;
width: 40vw;
height: 6vh;
margin: 0 auto 2vh;
padding: 0.5vh 0;
border: 1px solid hsl(217, 86%, 50%);
border-radius: 1.5rem;
background-color: hsla(212, 29%, 80%, 25%);
text-align: center;
font-size: 1.5rem;
color: #0078D7;
}
#clear {
float: right;
transform: rotate(45deg);
padding: 0;
border: none;
background: none;
font-size: 3.5rem;
cursor: pointer;
}
#clear:focus {
outline: 0;
}
/*
Flex is applied to the button.star'S parent tag so the order
property can be utilized.
*/
.flex {
display: flex;
justify-content: space-evenly;
align-items: center;
width: 70vw;
}
.star {
display: table-cell;
position: relative;
width: 16vw;
height: 24vh;
border: thin solid black;
background: #DDD;
font-size: 3.75rem;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
/*
GSC (General Sibling Combinator: ~ ) provides highlighting across
multiple buttons.
Exp. 5 buttons: [-] [-] [X] ~ [>] ~ [>]
*/
.star.active,
.star:hover,
.star.active ~ .star,
.star:hover ~ .star {
background: gold;
}
/*
HTML layout has button.star in reverse order. Applying order to
each button rectifies the order by APPEARING in order while the
HTML structure remains reversed.
*/
#star1 {
order: 1;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
#star2 {
order: 2;
}
#star3 {
order: 3;
}
#star4 {
order: 4;
}
#star5 {
order: 5;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
#star1:hover,
#star1.active {
color: #5BC0DE;
}
#star2:hover,
#star2.active {
color: #FF1C8D;
}
#star3:hover,
#star3.active {
color: #00D800;
}
#star4:hover,
#star4.active {
color: #0000D5;
}
#star5:hover,
#star5.active {
color: #D50000;
}
<form id="stars" action="">
<fieldset name="levels" class="levels">
<legend class="message">Novice</legend>
<button id="clear" type="reset" title="Game Reset">🔄</button>
<section class="flex">
<button id="star5" name='star' class="star" title="Master">🟐</button>
<button id="star4" name='star' class="star" title="Expert">🟌</button>
<button id="star3" name='star' class="star" title="Advanced">🟊</button>
<button id="star2" name='star' class="star" title="Intermediate">🟆</button>
<button id="star1" name='star' class="star active" title="Novice">🟂</button>
</section>
</fieldset>
</form>

why Custom Error Dialog Box keeps disappearing?

I want to make a custom error dialog box, this is the code i used, but whenever i run it, it shows for a second then disappear, I can't find the problem in this code, can anyone help me?
HTML:
<form name="signup" action="" onSubmit="return Validation_for_SignUp" method="post">
<h2 id = "FormTitle"> New Member? Sign up first! </h2>
<label>Username</label>
<input type="text" name="username" id="name"/>
<label>Email</label>
<input type="text" name="email" id="email"/>
<label>Password</label>
<input type="password" name="password" id="password"/>
<label>Confirm Password</label>
<input type="password" name="cpassword" id="cpassword"/>
<button id="Register"onclick="Error.render('Please check the field')"> Sign Up </button>
</form>
JavaScript:
<script>
function CustomError()
{
this.render = function (dialog)
{
var WinWidth = window.innerWidth;
var WinHeight = window.innerHeight;
var ErrorDialog = document.getElementById('ErrorDialog');
var ErrorDialogBox = document.getElementById('ErrorDialogBox');
ErrorDialog.style.display = "block";
ErrorDialog.style.height = WinHeight + "px";
ErrorDialogBox.style.left = (WinWidth/2) - (550 * .05) + "px";
ErrorDialogBox.style.top = "100px";
ErrorDialogBox.style.display = "block";
document.getElementById ('DialogHead').innerHTML = "Warning!";
document.getElementById ('DialogBody').innerHTML = dialog;
ddocument.getElementById ('DialogFoot').innerHTML = '<button onclick = "Error.ok()"> OK </button>';
}
this.ok = function ()
{
document.getElementById('ErrorDialogBox').style.display = "none";
document.getElementById("ErrorDialog").style.display = "none"
}
}
var Error = new CustomError();
</script>
CSS:
#ErrorDialog
{
display: none;
opacity: .8;
position: fixed;
top: 0px;
left: 0px;
background: black;
width: 100%;
z-index: 10;
}
#ErrorDialogBox
{
display: none;
position: fixed;
background: white;
border-radius: 7px;
width: 550px;
z-index: 10;
}
#DialogHead
{
background: #666;
font-size: 19px;
padding: 10px;
color: #CCC;
}
#DialogBody
{
background: #333;
padding: 20px;
color: #FFF;
}
#DialogFoot
{
background: #666;
padding: 20px;
color: #FFF;
}

Hi #wang Hee Ra _ Gogo There is no problem with your code except that the Sign up button posts your form which eventually reload the page, This is the reason why your Dialog dissapear immediatly, And to verify what i'm saying just try to run your Error.render(); function through console or maybe from another button outside the form like:
TEST IT
Clicking this button will show the dialog box and it won't dissapear So maybe you can try to alter your code in a way that does not submit immediatly but after no error is found.
i hope this answer your qustion.