Estoy haciendo un proyecto para la escuela, es un juego básico de adivinanzas de países en el que escribes el nombre de un país en un campo de entrada y presionas enter para verificar si es correcto o no.
Se supone que la función a continuación verifica el campo de entrada en la matriz de la lista de países para ver si es correcto. Ahora no tengo problemas para mostrarlo, pero me gustaría que la matriz se muestre más como una lista y que cree una nueva fila/columna si está a punto de salir del borde del cuadro en el que se muestra.
Visualización del problema de visualización de matriz
Preferiblemente, la matriz debe comenzar llenando 1 columna y luego, cuando esté a punto de tocar la parte inferior del cuadro que se muestra, debe comenzar una nueva columna y continuar.
Intenté casi todo, incluso agregar el valor del campo de entrada a una lista sin usar una matriz, pero luego tuve problemas para verificar si el valor de entrada ya se había adivinado o no. obviamente no deberías poder escribir España 7 veces.
Cualquier ayuda muy apreciada.
js.
var guessedCorrect = []; addEventListener("keyup", function(e) { if(e.keyCode === 13) { input = document.getElementById("input").value; if (countryList.indexOf(input) > -1 && guessedCorrect.indexOf(input) == -1) { guessedCorrect.push(input); document.getElementById("countryArray").innerHTML = guessedCorrect; } if (guessedCorrect.indexOf(input) > -1) { } document.getElementById("input").value = ""; } });HTML
<body> <main> <div id="gameContainer"> <button id="startGame" onclick="startGame()" >Start</button> <button id="resetGame" onclick="resetGame()" >Reset</button> <div id="inputArea"> <input type="text" id="input" placeholder="Guess country.." name="input"> </div> <div id="timerArea"> <span id="timer"></span> </div> <div id="textArea"> <div id="countryArray"></div> </div> </div> </main> <script src="../js/script.js"></script> </body>CSS
#countryArray { margin: 1rem 1rem; } #textArea { grid-column-start: 4; grid-column-end: 7; grid-row-start: 2; grid-row-end: 5; margin: 15px; Background-color: white; border-radius: 20px; border: 4px solid black; max-width: 100%; }