如何獲取日期輸入的值？

Question

所以基本上我希望“租船”的價格在滿足特定要求時發生變化。 如果用戶選擇工作日的日期，它將從輸入字段中獲取值，價格為每小時 10 美元。 如果是星期六，價格為每小時 15 美元，如果是星期天，則價格為每小時 20 美元。 用戶最多可以租用 10 小時，他們將在底部獲得總價。

我現在只有輸入字段的 HTML 代碼，我什至不知道如何開始 JavaScript 部分。 因此，如果有人可以教如何開始，將不勝感激！

<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>

對不起，如果我想要的解釋很難理解，我是 JavaScript 的初學者。

謝謝

Answer 1

這應該可以很好地說明您要做什么。 您可以將input事件與target.value一起使用來獲取值。 我通過解構獲得value ： const {value} = target它類似於target.value 。

如果您不想使用實時結果，您可以使用類似submitButton.addEventListener('submit', ...而不是通過querySelector設置 submitButton 的地方。但您仍然需要讀取相同的target.value如果您決定以這種方式輸入 go，則來自“小時”輸入元素。

// 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)
})

Answer 2

 <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>

現在使用您想要在 var X 上應用的條件。取貨日期將存儲在您可以用於您的條件的 x 中。

Answer 3

你可以嘗試這樣的事情......

 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>