Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

Solución un poco diferente o mas "completa"

Al realizar el ejercicio me di cuenta que si una persona desea realizar mas cálculos debe cambiar directamente las variables en el archivo, pero... ¿podemos realizar algo en el que podamos cambiar esas variables directamente en la "pagina web" sin entrar al código? gracias a este "problema" realice la siguiente opción (en esta solución utilice conceptos o temáticas que pueden ser desconocidas para algunos, sin embargo, no esta demás compartir una de tantas opciones para el ejercicio :3 )

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Alchol o Gasolina</title>
</head>
<body>
    <h1>Ejercio con javaScript</h1>
    <div class="contenedor">
        <div class="contenedor-gasolina">
            <h2>Gasolina o Alcohol</h2>
            <form >

            <select name="combustible" id="combustible" required>
                <option value="GASOLINA">Gasolina</option>
                <option value="ALCOHOL">Alcohol</option>
            </select>
            <br>
            <label for="kilometros">Distancia en kilometros : </label>
            <input     id="kilometros"
                    type="number"
                    name="kilometros"
                    required>

            <label for="litros">Capacidad en litros : </label>
            <input     id="litros"
                    type="number"
                    name="litros"
                    required>
            <br>
            <input     id="submit"
                    type="button"
                    value="calcular"
                    >
            </form>

            <h3>Resultado :</h3>
            <label  id="label-resultado" for="resultado">El consumo por kilometro es </label>
            <input id="resultado">
        </div>

    </div>
    <script src="code.js"></script>
</body>
</html>

JavaScript

let distancia = document.querySelector("#kilometros")
let tanque = document.querySelector("#litros")
let tipoDeCombustible = document.querySelector("#combustible")

let boton = document.querySelector("#submit")
let resultado = document.querySelector("#resultado")

let label = document.querySelector("#label-resultado")

boton.addEventListener("click", () =>{
    if (distancia.value != "" && tanque.vale != ""){
        resultado.value = (distancia.value/tanque.value)
        label.innerHTML =` El consumo de <b>${tipoDeCombustible.value}</b> por kilometro es `;
    }
})

Comentarios o Explicaciones

  • por comodidad preferí separar el HTML del JavaScript por ello cree otro archivo llamado "code.js" y en el HTML lo llame con la etiqueta <script src="code.js"></script>
  • para poder manipular los elementos o valores del html desde el archivo de Javascript les añadi un identificador "id"
  • si gustan, pueden copiar el codigo y pegarlos en dos archivos (uno de html y el otro en javascript), estos archivos deben estar en la misma carpeta o también lo de JavaScript lo pueden agregar directamente en la etiqueta <script>
1 respuesta
solución!

Hola Kevin, espero estés muy bien.

Felicitaciones por tu aprendizaje, continúa con ese empeño. Para agilizar el tiempo de respuesta en caso de dudas relacionadas con los cursos, estamos priorizando el foro para postear dudas.

En caso que desees compartir tus ejercicios o actividades dispusimos en Discord un canal exclusivo para ese fin (#compartatucodigo)

Te dejo éste link que muestra donde puedes compartir tus actividades https://www.youtube.com/watch?v=ZhXdFO6SxQ4

Si necesitas ayuda, estaremos aquí! Un saludo!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios