Apex Code Development You need to sign in to do that
Don't have an account?
LWC Component Creation Related
Task--->I have done the Below Requirement with the help of Html+JavaScript Successfully.But Now I Want to do this With the help of LWC.
how to Rander the Html Template for Images using Javascript in Lwc for display or hidden...??
Consider the images I have Used in my code..
Just First Look Below what i have done and what is the Requeirement....
Requeirement--->
Create an input fields with name 'Speed'.
Create a Button with Name 'Calculate'.
Limit of speed lies between 0 to 100
We need to display 3 images On UI which are having Signs as 'Safe','Warning' and 'Danger' on the basis of some Condition.
Initially all images are hidden.
0 to 40 - 'Safe' sign image
40 to 60 - 'Warning' sign image
60 to 100 - 'Danger' sign image
if spped is below 40 then it should display safe image.
if someone put 50 and click on calculate then warning image should display.
if speed is between 60 to 100 then it should display Danger image.
We need to show or hide images in that particulr way
I have written Code in simple Html -JavaScript and Successfully done the Task--
Thank You in Advance
how to Rander the Html Template for Images using Javascript in Lwc for display or hidden...??
Consider the images I have Used in my code..
Just First Look Below what i have done and what is the Requeirement....
Requeirement--->
Create an input fields with name 'Speed'.
Create a Button with Name 'Calculate'.
Limit of speed lies between 0 to 100
We need to display 3 images On UI which are having Signs as 'Safe','Warning' and 'Danger' on the basis of some Condition.
Initially all images are hidden.
0 to 40 - 'Safe' sign image
40 to 60 - 'Warning' sign image
60 to 100 - 'Danger' sign image
if spped is below 40 then it should display safe image.
if someone put 50 and click on calculate then warning image should display.
if speed is between 60 to 100 then it should display Danger image.
We need to show or hide images in that particulr way
I have written Code in simple Html -JavaScript and Successfully done the Task--
<html>
<head>
<title>
Speed Page
</title>
</head>
<body>
<label>Speed</label>
<input type="text" id = 'Speed'>
<button onclick="handleClick()">calculate</button>
<img src="https://5.imimg.com/data5/NJ/KM/MY-19300535/safety-danger-sign-board-500x500.jpg"
alt="Trulli" width="500" height="333" style="display:none;" id="theImage">
<img src="https://as1.ftcdn.net/v2/jpg/04/09/61/02/1000_F_409610233_1DTKcm2vZhOdXlT9lWtCjkX7foRwnoaf.jpg"
alt="Trulli" width="500" height="333" style="display:none;" id="theImage1">
<img src="https://cdn.jjkeller.com/wcsstore/CVCatalogAssetStore/images/product/500x500/8002485.jpg"
alt="Trulli" width="500" height="333" style="display:none;" id="theImage2">
</body>
<script>
function handleClick()
{
var Speed1 = document.getElementById('Speed');
if(parseInt(Speed1.value) > 0 && parseInt(Speed1.value)<40)
{
document.getElementById("theImage2").style.display = "block";
document.getElementById("theImage1").style.display = "none";
document.getElementById("theImage").style.display = "none";
}
else if(parseInt(Speed1.value) >40 && parseInt(Speed1.value)<60)
{
document.getElementById("theImage2").style.display = "none";
document.getElementById("theImage1").style.display = "block";
document.getElementById("theImage").style.display = "none";
}
else if(parseInt(Speed1.value) >60 && parseInt(Speed1.value)<100)
{
document.getElementById("theImage").style.display = "block";
document.getElementById("theImage1").style.display = "none";
document.getElementById("theImage2").style.display = "none";
}
else if(parseInt(Speed1.value)>100)
{
document.getElementById("theImage").style.display = "none";
document.getElementById("theImage1").style.display = "none";
document.getElementById("theImage2").style.display = "none";
}
}
</script>
</html>
Thank You in Advance