He escrito un script en html para una "Terminal".
<html> <head> <title>Nonscript</title> <div id="htmlterminal"> <center> <pre> +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ |H|T|M|L| |T|E|R|M|I|N|A|L| |M|A|D|E| |B|Y| |M|A|X| +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ </pre> </center> </div> <style> #htmlterminal { background: red; background: -webkit-linear-gradient(left, orange, yellow, green, cyan, blue, violet); background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 3vw; } #htmlterminal </style> </head> <body style="background-color:Black;"> <p id="welcome" , style="color:white">Hello welcome to the HTML Terminal, for a list of commands type "help".</p> <center> <form class="pure-form"> <input id="command_prompt" type="text" placeholder="Enter command" /> <button type="submit">Run<i class="fa fa-chevron-circle-right"></i></button> </form> </center> <p id="return" , style="color:white"></p> <script> var commandPrompt = document.getElementById('command_prompt'); document.querySelector('form.pure-form').addEventListener('submit', function(e) { e.preventDefault(); document.getElementById("return").innerHTML = "Executing: " + commandPrompt.value; }); </script> </body> </html> Y he intentado usar if para verificar la entrada, pero parece que no funciona, aquí está mi código:
if commandPrompt.value = "help" { document.getElementById("return").innerHTML = "Some more commands come here" } else{ return null }He navegado por la web pero todavía no he encontrado nada, ¿puedo obtener ayuda?,
Gracias, Blitzel
¡Espero que lo siguiente pueda arrojar luz sobre cómo proceder! Al asignar un valor, usa un solo = pero para verificar la igualdad usa == o, para igualdad estricta ===
El clic del botón es, creo, el desencadenante para ejecutar/probar el comando ingresado, así que agregue un controlador de eventos de click a ese botón y desde allí procese el valor ingresado en el campo de texto.
let cmd=document.getElementById('command_prompt'); let output=document.getElementById("return"); let bttn = document.querySelector('button[type="submit"]').addEventListener('click', function(e) { e.preventDefault(); let value; switch( cmd.value ){ case 'help': value='Some more commands come here'; break; case 'panic': value='Other text/cmds'; break; default: value='The command: "' + cmd.value + '" has not been defined'; break; } output.innerHTML=value; }) #htmlterminal { background: red; background: -webkit-linear-gradient(left, orange, yellow, green, cyan, blue, violet); background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 3vw; } <div id="htmlterminal"> <center> <pre> +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ |H|T|M|L| |T|E|R|M|I|N|A|L| |M|A|D|E| |B|Y| |M|A|X| +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ </pre> </center> </div> <p id="welcome">Hello welcome to the HTML Terminal, for a list of commands type "help".</p> <center> <form class="pure-form"> <input id="command_prompt" type="text" placeholder="Enter command" /> <button type="submit">Run<i class="fa fa-chevron-circle-right"></i></button> </form> </center> <p id="return" style="color:red"></p>