Página html com javascript para exibir n números aleatórios entre 1 e 100

Edinaldo Cavalcante · 31 de julho de 2016

Olá a todos do fórum. Estou com dificuldade em resolver um exercício com o seguinte enunciado:

"Escreva uma página HTML contendo um formulário e uma função Javascript com argumento, que recebe um valor N passado pelo formulário, calcula N números randomicos inteiros positivos de 1 a 100 e depois exibe o resultado."

Segue abaixo a página HTML com javascript que tentei criar para resolver essa questão:

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		
		<script>
			function exibeAleatorios (){
				var form = document.getElementById('formulario');
				var numero = document.getElementById('numero');
				
				form.addEventListener('submit', function(e) {
				
					for (i = 1; i <= numero; i++){
						valor = Math.round(Math.random()*100);
						document.write (valor);
					}
				}
			}
			
		</script>
	</head>
	<body>
		<form id="formulario">
			<div>
				<label for="numero">Informe a quantidade de números inteiros aleatórios entre 1 e 100 a serem exibidos:</label>
				<input type="text" id="numero" />
			</div>
			
			<input type="submit" value="Enviar" onclick="exibeAleatorios">
		</form>
	</body>
	
</html>

Porém como não sou bom em javascript não consegui exibir os resultados, por esse motivo peço ajuda de vocês para me informar onde esta o erro. Agradeço desde já.

DiF · 31 de julho de 2016

@Edinaldo Cavalcante Olá

Tem diversas formas de resolver isso.

http://www.w3schools.com/jsref/met_element_addeventlistener.asp

Por exemplo:

var form = document.getElementById('formulario').addEventListener('submit', exibeAleatorios);

function exibeAleatorios(numero){
	var numero = document.getElementById('numero').value;
	for (i = 1; i <= numero; i++){
		var valor = Math.round(Math.random()*100);
		document.write (valor + " ");
	}		    
}

O erro do seu código é porque você adicionou o evento dentro de uma função onde normalmente é o contrário.

Você coloca a função dentro do evento.

Por exemplo:

document.getElementById("formulario").addEventListener("submit", function() {
    exibeAleatorios(numero);
});

exibeAleatorios(numero){
   //faz algo aqui
}

Enfim.. Veja o exemplo funcionando: https://jsfiddle.net/8y52okqg/1/

PS: alterei o submit para button porque o jsfiddle não aceita. mas no seu caso podes usar o submit.

PS: Leia mais atentamente o enunciado:

Citação

uma função Javascript com argumento, que recebe um valor N passado

No seu código, você criou a função... mas não passou o argumento.

Edinaldo Cavalcante · 31 de julho de 2016

Obrigado Dif pela sua ajuda! agora o código está funcionando! Muito bom esse serviço do jsfiddle: é possível ver o código funcionando on line sem necessitar baixar o arquivo, isso é muito útil, eu não conhecia esse serviço.