Soy nuevo en javascript y tengo un programa que cuenta del 1 al 100, revisando cada número si son múltiplos de tres o cinco. Si es un múltiplo de tres, la palabra Fizz se agrega a una matriz. Si es un múltiplo de cinco, Buzz se agrega a la matriz. Si es un múltiplo de ambos, se agrega FizzBuzz a la matriz. De lo contrario, simplemente suma el número si no es múltiplo de ninguno. Creo que funciona, pero parece que no puedo mostrar el resultado en la página html.
Intenté ajustar la parte document.getElementById en el javascript haciendo cosas como
¡Cualquier ayuda sería apreciada!
HTML (índice de nombre de archivo):
<!DOCTYPE html> <html> <head> <title>Fizz Buzz Challenge</title> <script src="fizzBuzz.js" charset="utf-8"></script> </head> <body> <h2>The Fizz Buzz Test:</h2> <div id = "output"> </div> </body> </html>Javascript (archivo llamado fizzBuzz):
const result = []; for(let i = 1; i <= 100; i++){ if(i % 3 === 0 && i % 5 === 0) { result.push('FizzBuzz'); } //if end else if (i % 3 === 0) { result.push('Fizz'); } //else if end else if (i % 5 === 0) { result.push('Buzz'); } // else if end else { result.push(i); } //else end } //for document.getElementById("output") = result.join();Simplemente agregue .innerText o .innerHTML a document.getElementById("output")
Debería estar funcionando, y un excelente comienzo con el antiguo algoritmo FizzBuzz.
Une los elementos de la matriz usando un salto de línea al innerText del elemento de output .
Mueva la llamada <script> justo antes de la etiqueta </body> para permitir que el DOM se cargue antes de intentar almacenar en caché el elemento.
const result = []; for (let i = 1; i <= 100; i++) { if (i % 3 === 0 && i % 5 === 0) { result.push('FizzBuzz'); } else if (i % 3 === 0) { result.push('Fizz'); } else if (i % 5 === 0) { result.push('Buzz'); } else { result.push(i); } } document.getElementById("output").innerText = result.join('\n'); <body> <h2>The Fizz Buzz Test:</h2> <div id="output"> </div> </body>Primero, debe asignar la salida al contenido de texto del elemento.
document.getElementById("output").textContent = result.join(); Otra cosa es que haya ejecutado su secuencia de comandos después de que se represente el DOM. Puede hacer esto simplemente moviendo su etiqueta de secuencia de script al final del cuerpo, de modo que cuando se represente el DOM, lo llamará secuencia de comandos.
<!DOCTYPE html> <html> <head> <title>Fizz Buzz Challenge</title> </head> <body> <h2>The Fizz Buzz Test:</h2> <div id = "output"> </div> <script src="fizzBuzz.js" charset="utf-8"></script> </body> </html>