I have a condition that when the input value is greater than 100, another bottle is added, but I don’t know where to insert another function so that the second bottle displays the water level I need.
I was trying to add a new function to a function addBottle2, but only got errors
let inputWaterLevel = document.querySelector('[name=water-level]');
let heightLiquid = +tubeLiquid.getAttribute('height');
let yLiquid = +tubeLiquid.getAttribute('y');
let liquidPercent = heightLiquid/100;
inputWaterLevel.addEventListener('input', updateWaterLevel);
function updateWaterLevel() {
let value = +this.value;
let height = liquidPercent * value;
let y = yLiquid + (heightLiquid-height);
tubeLiquid.setAttribute('height', liquidPercent * value )
tubeLiquid.setAttribute('y', y )
}
let addBottle2 = () => {
inputWaterLevel.id = 'inpId';
let inpId = document.getElementById('inpId')
inpId.addEventListener("input", () => {
if (inpId.value > 100) {
document.getElementById("bot2").style.display = 'block';
}
else if (inpId.value <= 100){
document.getElementById("bot2").style.display = 'none';
}
});
}
addBottle2()
.cont{
display: flex;
}
#bot2{
display: none;
}<p><input type="number" min="0" max="200" value="100" name="water-level" /></p>
<div class="cont">
<div class="bot1">
<svg viewBox="0 0 300 300" width="150">
<clipPath id="clip">
<rect x="118" y="68" width="64" height="228" rx="20" ry="20" />
</clipPath>
<image width="300" xlink:href="https://i.ibb.co/HGFQYTj/bottle.png" />
<rect clip-path="url(#clip)" id="tubeLiquid" x="115" y="58" width="70" height="233" fill="#74ccf4" />
</svg>
</div>
<div id="bot2">
<svg viewBox="0 0 300 300" width="150">
<clipPath id="clip2">
<rect x="118" y="68" width="64" height="228" rx="20" ry="20" />
</clipPath>
<image width="300" xlink:href="https://i.ibb.co/HGFQYTj/bottle.png" />
<rect clip-path="url(#clip2)" id="tubeLiquid2" x="115" y="58" width="70" height="233" fill="#74ccf4" />
</svg>
</div>
</div>
4
Answers
What you can do is re-use the code to fill the first bottle, but with parameters telling which bottle to update, and which value to subtract from the total percentage, something like this:
In theory you could update the second bottle using only one event listener, but I didn’t want to modifiy your code more than necessary. When you can, don’t add 2 listeners to the same input when you can put your code in a single one, it makes the code easier to read
Also your function
addBottle2is not properly named, as it doesn’t add a second bottle, it just sets the listener to it, and then shouldn’t be called twice.You have also minor optimisations that can be done. Note also that as it is, the code won’t support different size bottles, as the function uses the values calculated for the first bottle’s height
First, don’t refer to the element using its id directly as an variable. See this post. Always use proper method to get the element from the DOM.
Second, the
addBottle2function is redundant.These two lines are redundant because you have already get the input element in
inputWaterLevel. Changing itsidand get it again byiddo nothing useful. Just use it as is.This is also redundant because you have already added the event listener
updateWaterLevel. You can simply add code inupdateWaterLevelYou don’t need a second
functionto achieve that.You can check: when the input value is greater than 100, the height and position of tubeLiquid2 are calculated based on the remaining value (value – 100), and the bot2 div is displayed.
Water Level Task
Create a second function to manage the water level of the second bottle. Lets call the new function
updateWaterLevel2(). We will use a very similar logic toupdateWaterLevel(), however it will operate ontubeLiquid2element instead.In
updateWaterLevelI will add a conditional check when the value goes over 100 and callupdateWaterLevel2()with the excess amount. Inside theupdateWaterLevel2()function, we will adjust theheightandyattributes oftubeLiquid2just like intubeLiquid.Also you need to select the
tubeLiquid2element from theDOMand get the initialheightandyvariable values. Those values are needed to calculate the newheightandypositions of the liquid inside the second bottle.