Básicamente, quiero que el precio de "alquilar un barco" cambie cuando se cumpla un requisito específico. Si el usuario selecciona una fecha que se encuentra en un día laborable, tomará el valor del campo de entrada y el precio será de 10 $ por hora. Si es sábado el precio será de 15$ la hora, y si es domingo el precio será de 20$ la hora. El usuario puede alquilarlo hasta 10 horas y obtendrá un precio total en la parte inferior.
Todo lo que tengo en este momento es el código HTML para los campos de entrada y ni siquiera sé cómo comenzar la parte de JavaScript. Entonces, si alguien puede enseñar cómo comenzar, ¡sería muy apreciado!
<div id="main"> <label for="which_date">Which date do you want to rent?</label> <input type="date" id="which_date_input" min="2022-05-02"> <button id="submit">Submit</button> <label for="total_hours">How many hours do you want to rent? (Max 10 hours)</label> <input type="number" id="total_hours_input" placeholder="0" min="1" max="10"> <p id="result"></p>Lo siento si la explicación de lo que quiero es difícil de entender, soy un principiante cuando se trata de JavaScript.
Gracias
Esto debería dar una buena indicación de lo que está tratando de hacer. Puede usar el evento de input junto con target.value para obtener el valor. Obtengo value al desestructurar: const {value} = target es similar a target.value .
Si no desea trabajar con resultados en tiempo real, puede usar algo como submitButton.addEventListener('submit', ... en lugar de configurar el botón de envío a través querySelector . pero aún necesitará leer el mismo target.value desde el elemento de entrada "horas" si decide ir de esa manera.
// Do something with the results const someAction = (amount) => { console.log(`The amount is: £${amount}`) } // Get the input element const totalHoursInput = document.querySelector("#total_hours_input") // Listen to the input event totalHoursInput.addEventListener("input", ({ target }) => { // Get the day name const day = new Date().toLocaleString('en-us', { weekday: 'long' }).toLocaleLowerCase() const { value } = target // The input value // Determine the correct rate let rate = 10 // Weekday default if (day === "saturday") { rate = 15 } else if (day === "sunday") { rate = 20 } // do something with the rate x value someAction(rate * value) }) <label for="which_date">Which date do you want the ticket for?</label> <input type="date" id="which_date_input" value="" min="2022-05-02"> <button id="submit" onclick="getDate()">Submit</button> <p id="result"></p> <script> function getDate() { var x = document.getElementById("which_date_input").value; document.getElementById("result").innerHTML = x; } </script>ahora use la condición que desea aplicar en var X. la fecha de recogida se almacenará en x que puede usar para sus condiciones.
Puedes intentar algo como esto...
function getPrice() { const whichDate = new Date(document.getElementById("which_date_input").value); const totalHours = document.getElementById("total_hours_input").value; let perHour = 10; if (whichDate.getDay() === 6) { perHour = 15; } if (whichDate.getDay() === 0) { perHour = 20; } document.getElementById("result").innerText = "Total price: $" + totalHours * perHour; } <div id="main"> <label for="which_date">Which date do you want the ticket for?</label><br> <input type="date" id="which_date_input" min="2022-05-02"><br> <label for="total_hours">How many hours do you want to rent? (Max 10 hours)</label><br> <input type="number" id="total_hours_input" placeholder="0" min="1" max="10"> <button id="submit" onclick="getPrice()">Submit</button><br> <p id="result"></p> </div>