Pegar um elemento do input e inserir numa div com javascript

Front-end
#1

Boa tarde

Estou criando uma página html que tem como função converter um número de 1 a 10 em seu equivalente em algarismos romanos, tudo com javascript.

O usuário digita um número num input e pressiona o enter automaticamente o seu valor em aparece em embaixo numa div.

Não faço ideia de como fazer isso, agradeço a ajuda de todos

Meu código em javascript : 

<!Doctype html>

	 <style>
	         
			h1{
			   text-align:center;
			   color:#ff00aa;
			   background-color:#ffff00;
			   border:solid 1px;
			  }
			  
	        #X{
			   text-align:center;
			   color:#ff00aa;
			   background-color:#ffff00;
			   border:solid 1px;
			   padding:50px;
			   margin-top:100px;
			   
			  }
			  
			#Tela{
			   border:solid 1px;
			   padding:100px;
			   margin-left:350px;
			   margin-right:400px;
			   margin-top:100px;
			
			   
			  }
			  
			.Centro{
			        margin-left:400px;
			        
				}
	 
	 </style>
	 
	 <script language="javascript">
	         
			var num;
			
			num = document.getElementById('entrada');
	 
	 </script>

	 </br>
	 
	 <label class="Centro">Informe um número de 1 a 10 :</label><br><br>
	 <input class="Centro" type="text"  id="entrada" placeholder="Digite aqui"></br></br>
	 
     <div id="Tela">
	 
	 </div>
	 
	 <footer id="X">
	 
	 </footer>

Captura%20de%20Tela%20(1)
Captura de Tela (1).png1024×768 58.1 KB

#2

Os numeros romanos sao assinados de tras para frente, o que é contra intuitivo mas ajuda na hora de programar, tudo o que você precisa fazer é traverse a lista de decimais e subtrair do argument, e a partir daí ir criando o output.

const convert_int_to_roman = n => {
  if (!+n) {
    return false;
  }
  let r = '';
  let n_ref = n;
  const decimal = [1, 4, 5, 9, 10, 40, 50, 90, 100, 400, 500, 900, 1000];
  const roman = ['I','IV','V','IX','X','XL','L','XC','C','CD','D','CM','M'];

  for (let i = 12; i >= 0; i--) {
    while (n_ref >= decimal[i]) {
      r += roman[i];
      n_ref -= decimal[i];
    }
  }
  return r;
};

A logica principal é essa acima, para conectar a logica voce precisa de ter um event handler, onClick por exemplo ou voce pode usar um event listener para ativar assim que o usuario apertar enter on pc/return on mac. Tambem, evite de usar id para styling.

Boa sorte!

1 curtida