In an online game, students are asked "How many 12-year-olds already have (…)" and have to choose how many of 25 people's icons (4%) they color in. This is actually kind of a range input, but I thought it could be done easily with an input type="number" too.
I've already got it working to some extent. Arrow up or mouse up adds the necessary class, but the remove class doesn't work yet. When I enter a number, the people's icon with that number gets the class, but all icons with a lower id should also get the class.
You can find the live example here. The code I'm using:
HTML:
<svg id="manneke1" class="manneke" (…) /></svg>
(…)
<svg id="manneke25" class="manneke" /></svg>
<input type="number" id="inputMannekes" class="form-control text-center" name="inputMannekes" value="0" min="0" max="25"/>
CSS:
.manneke {
fill:none;
stroke:#004f75;
stroke-linecap:round;
stroke-linejoin:round;
stroke-width:11.49px;
}
.gevuld {
fill:#f5c1bc;
stroke: #e66557;
}
Javascript:
$("#inputMannekes").change(function () {
if (this.getAttribute('value') === this.value) {
$(this).data('lastvalue', this.value);
console.log(this.value);
} else {
if (this.value > $(this).data('lastvalue')) {
$("#manneke"+$(this).val()).addClass("gevuld");
} else {
$("#manneke"+$(this).val()).removeClass("gevuld");
}
}
}).change();
You don't have to store the value in the data attributes ($(this).data(...)) when you can use variables let myVariable = .... I'm not sure what exactly you were trying to accomplish with this. Also you want to iterate over all the icons because the number may not change by just one (for example, user can directly type 25 into the input).
I see that you used jQuery, but the solution can be easily done with native JavaScript. That's why I'm attaching a sample without jQuery.
// code just for this example (create 24 svgs)
const iconsCount = 25;
const svg = document.querySelector('.manneke');
const root = document.querySelector('.root');
for (let i = 0; i < iconsCount - 1; i++)
root.append(svg.cloneNode(svg));
// code for class replacement
const svgs = document.querySelectorAll('.manneke');
const input = document.querySelector('input');
input.addEventListener('change', (e)=>{
// for each icon...
for (let i = 0; i < iconsCount; i++) {
// ...add or remove className?
i < e.target.value
? svgs[i].classList.add('gevuld')
: svgs[i].classList.remove('gevuld')
}
});.manneke {
width: 30px;
fill:none;
stroke:#004f75;
stroke-linecap:round;
stroke-linejoin:round;
stroke-width:11.49px;
}
.gevuld {
fill: #f5c1bc;
stroke: #e66557;
}<div class="root">
<svg class="manneke" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 253.49 384.48"><path class="cls-1" d="M240.77,192.85,180,132s-9.73-11.86-25.49-11.86a60.57,60.57,0,1,0-55.43,0C83.27,120.17,73.54,132,73.54,132L12.72,192.85a23.81,23.81,0,0,0,33.67,33.67l24-24V354.92a23.82,23.82,0,0,0,47.63,0v-86h17.43v86a23.81,23.81,0,1,0,47.62,0V202.51l24,24a23.81,23.81,0,0,0,33.68-33.67Z"></path></svg>
</div>
<input type="number" value="0" min="0" max="25"/>Use this:
$("#inputMannekes").change(function () {
for(var i=1; i<= $(this).val(); i++) {
$("#manneke" + i).addClass("gevuld");
}
for(var i=$(this).val() + 1; i<= 25; i++) {
$("#manneke" + i).removeClass("gevuld");
}
})