Ciao a tutti, sono nuovissimo sul forum ma sono sicuro che qua è pieno di gente molto più brave di me in HTML e Javascript. Praticamente ho provato a creare questo script. Voglio che si inseriscono un input litri e percentuale, quando si preme il bottone invece compare sotto (variabile in grassetto) quanti ml servono in x litri. Però non funziona cosa ho sbagliato?
codice:
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MiscelaCalc</title>
    <h1 style=color:red>Miscela<span style= color:black>Calc</span>
    </h1>
    
    <style>
    body {background-color:orange}
    
    .button {
    background-color:#4CAF50;
    border: none;
    padding: 15px 32px;
    color: white
    }
    </style>
    
    
   
</head>
<body>
<h3>Inserisci qui la quantità di litri:</h3>
<input id="litri" type=number>

<h3>Inserisci ora la percentuale:</h3>
<input id="percentuale" type=number><br>
<br>
<button class="button" onclick="funzione()"><b>CLICCA QUI</b></button>

    <script>
    var litri = document.getElementById(litri).value.bold()
    
    var percentuale= document.getElementById(percentuale)+"%".value.bold()    
    var conto = litri*percentuale*10 + "ml".bold()
    
    function funzione() {
    document.write("Perfetto,in "+litri+" litri per avere una miscela al "+percentuale+" bisogna aggiungere "+conto+" di olio."
  }  
    </script>
</body>
</html>
GRAZIE a tutti in anticipo