Detecting Input Value is Transforming to Message

Asked

Viewed 32 times

0

I’ve been trying to create a system for a while, but I can’t. I have a life bar that moves according to the current value and the maximum, with a dice next to it that creates a random value from 1 to 100 on the console, What I’ve been trying for a while is: a script that when I run a data run it detects the number of the current value is run the data, if the number of the data is less than the current value appears to a message on the screen, if the data value is greater than the current value a different message appears on the screen. (I’ve been trying for 3 days and I can’t.)

<html>
<script>
setInterval(function(){
    var max = document.getElementById('max-hp').value
    var hp = document.getElementById('atual-hp').value
    var barraHP = document.getElementById('vida')
    barraHP.style.width = (hp*100)/max + '%'

},1)

</script>

<script>
 
function rollDice() {
    var roll = Math.floor(Math.random() * 100) + 1;
    console.log(`${roll}`);
}

</script>

<style>

@import url('http://fonts.cdnfonts.com/css/secret-service-typewriter');

</style>



</style>
<div id="vidaNumbers">
<input value="0" id="atual-hp" type=number>&nbsp;/&nbsp; 
<input value="0" id="max-hp" type=number>
</div>
<br><br>

<div id="barravida">
    <div id="vida"></div>
    
<style>

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

    #barravida {
        wid
        overflow: hidden;
        width: 80%;
        background-color: #436DDF;
    }

    #vida {
        width: 30%;
        background-color: #002CA6;
        height: 29px;
    }
    

    input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
    #atual-hp, #max-hp {
    background: none;
    border: none;
    outline: none;
    color: white;
    font-weight: bold;
    font-family: 'CMU Typewriter Text', sans-serif;
    font-size: 12pt;
     text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    }
    #atual-hp{
    text-align: right;
    }
    #vidaNumbers {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    margin-top: 7.7%;
    margin-left: -3.5%;
    color: white;
    font-weight: bold;
    font-family: 'CMU Typewriter Text', sans-serif;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    }
    #max-hp {
    text-align: left;
    }
</style>

<input type="image" src="img/dice.png" id="sanibotao" onclick="rollDice()">

<style>
    
#sanibotao {
 position: absolute;
 top: 7%;
 left: 80%;
 width: 25px;
 height: 25px;
}

</style>

</html>
javascript html css

1 answer

0

I don’t know if I got it right, but is this like what you want to do? Follows:

function rodar(){
     var roll = Math.floor(Math.random() * 100) + 1;
     if(hp < roll){
          console.log("1");
     }else{
          console.log("2");
     }
}

Another good thing that you can take, is this ",1" setInterval leaves pure with nothing that it keeps running all the time and can avoid bugs. But from what I understand is what you want to do, if it’s not edited a little bit there that’s kind of hard to know, everyone knows if

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.