Question

I have a message “I have 3 tries left”, in this message “3” is dynamic and by default my <div> tag is set to style="display:none" :

<div id="triesleft" style="display:none"></div>

I am looking for a way to display the above message in a <div> dynamically on onchange event of a select box..

I tried with this

function triesleftfunc()
{
    var size = document.getElementById('size').value.split('x');
    var sizesqft = size[0]*size[1];
    var trial = document.getElementbyId(tires).value;
    if(sizesqft >= 50 && document.getElementById('options').value == 'Stiched Finish')
    {
        document.getElementById('triesleft').innerHTML = "I have "+trial+" tries left";
        document.getElementById('triesleft').display = "block";

        document.getElementById('options').focus();
        return false;
    }
}

NOTE I dont need alert Box it looks BAD BAD ….

Answer 1

Something like this should do it.

var triesLeft = 3;
document.getElementById("MySelectBox").onchange = function() {
    document.getElementById("triesleft").innerText = "You have " + triesLeft + 
                                                     " tries left.";
    document.getElementById("triesleft").style.display = "block";
    triesleft--;
}

And then just do some check on triesleft to make sure it’s not zero or less.