將函式結果顯示到html-有解無憂

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <label for="start">start</label>
    <input type="date" name="" id="start" />

    <label for="end">end</label>
    <input type="date" name="" id="end" />
    <button onclick="abc()">btn</button>
    <div id="pos">
      <p>duration:</p>
    </div>
    <script src="tes.js"></script>
  </body>
</html>

let tes1 = [];
function abc() {
  let start = document.getElementById('start').value;
  let end = document.getElementById('end').value;

  let blog = {
    start,
    end,
  };
  tes1.push(blog);
  console.log(tes1);
  console.log(blog);
  takeTheTime(start, end);
  renderPost();
}

function renderPost() {
  document.getElementById('pos').innerHTML = '';

  for (let i = 0; i < tes1.length; i  ) {
    document.getElementById('pos').innerHTML  = `
      <div id="pos">
      <p>durasi :${takeTheTime(start, end)}</p>
    </div>
      `;
  }
}

function takeTheTime(start, end) {
  let result;
  let one = new Date(start);
  let two = new Date(end);
  

  if (one < two) {
    result = two - one;
  } else if (result == undefined) {
    return alert('eror');
  }

  let msecond = 1000;
  let secInHours = 3600;
  let hoursInDay = 24;

  let distanceInDays = Math.floor(result / (msecond * secInHours * hoursInDay));
  let distanceInMonth = Math.floor(result / (msecond * secInHours * hoursInDay * 30));
  let distanceInYears = Math.floor(result / (msecond * secInHours * hoursInDay * 30 * 12));
  if (distanceInDays == 1) {
    return `${distanceInDays} Day`;
  } else if (distanceInMonth > 12) {
    return `${distanceInYears} Years`;
  } else if (distanceInDays >= 30) {
    return `${distanceInMonth} Month `;
  }  else if (distanceInDays > 1) {
    return `${distanceInDays} Days`;
  } 
}

在此處輸入影像描述我在使用 javascript 時遇到問題。我創建了一個計算開始日期和結束日期的網站，其中開始日期和結束日期的值取自用戶資料。我能夠將計算作為一個函式進行，但我對如何在網路上顯示結果感到困惑。也許你們可以提供幫助，在此先感謝:) 我還包含了 javascript 和 html 代碼。

uj5u.com熱心網友回復：

您可以在輸入時掛鉤輸入元素（開始、結束）。就像是：

let start = document.getElementById('start').value;
let end = document.getElementById('end').value;

start.addEventListener('change', () => abc())

end.addEventListener('change', () => abc())

需要改進，但你明白了

uj5u.com熱心網友回復：

你那里有一些錯誤。我修好了它們。希望這可以幫助。

let tes1 = [];
function abc() {
  let start = document.getElementById('start').value;
  let end = document.getElementById('end').value;

  let blog = {
    start,
    end,
  };
  tes1.push(blog);
  console.log(tes1);
  console.log(blog);
  renderPost(start, end);
}

function renderPost(start, end) {
  document.getElementById('pos').innerHTML = '';

  for (let i = 0; i < tes1.length; i  ) {
    document.getElementById('pos').innerHTML  = `
      <div id="pos">
      <p>durasi :${takeTheTime(start, end)}</p>
    </div>
      `;
  }
}

function takeTheTime(start, end) {
  let result;
  let one = new Date(start);
  let two = new Date(end);

  if (one.getTime() < two.getTime()) {
    result = two - one;
  }
  
  if (result === undefined) {
    return alert('Error');
  }

  let msecond = 1000;
  let secInHours = 3600;
  let hoursInDay = 24;

  let distanceInDays = Math.floor(result / (msecond * secInHours * hoursInDay));
  let distanceInMonth = Math.floor(result / (msecond * secInHours * hoursInDay * 30));
  let distanceInYears = Math.floor(result / (msecond * secInHours * hoursInDay * 30 * 12));
  if (distanceInDays == 1) {
    return `${distanceInDays} Day`;
  } else if (distanceInMonth > 12) {
    return `${distanceInYears} Years`;
  } else if (distanceInDays >= 30) {
    return `${distanceInMonth} Month `;
  } else if (distanceInDays > 1) {
  } else if (distanceInDays > 1) {
    return `${distanceInDays} Days`;
  }
}

<label for="start">start</label>
<input type="date" name="" id="start" />
<label for="end">end</label>
<input type="date" name="" id="end" />
<button onclick="abc()">btn</button>
<div id="pos">
  <p>duration:</p>
</div>

start并且end在renderPost. 您也不需要takeTheTime在abc.

uj5u.com熱心網友回復：

有幾個較小的錯誤會導致您的日期無法顯示。

#1

document.getElementById('pos').innerHTML  = `
  <div id="pos">
  <p>durasi :${takeTheTime(start, end)}</p>
</div>
  `;

在這里，您使用引數和呼叫該takeTheTime()函式。這些是在函式范圍內有效的區域變數。因此該函式將始終回傳未定義。因此，您要么需要直接提供值，例如 startendtakeTheTime(document.getElementById('start').value, document.getElementById('end').value)

或 makestart和end全域變數。

#2

 if (one < two) {
    result = dua - one;
  } else if (result == undefined) {
    return alert('eror');
  }

dua沒有定義，但我猜你的意思是two. 無論如何，one > two缺少第二種情況。

如果我們把它放在一起：

let tes1 = [];
  let start = document.getElementById('start').value;
  let end = document.getElementById('end').value;
function abc() {
  let blog = {
    start,
    end,
  };
  tes1.push(blog);
  renderPost();
}

function renderPost() {
  document.getElementById('pos').innerHTML = '';

  for (let i = 0; i < tes1.length; i  ) {
    document.getElementById('pos').innerHTML  = `
      <div id="pos">
      <p>durasi :${takeTheTime(start, end)}</p>
    </div>
      `;
  }
}

function takeTheTime(start, end) {
  let result;
  let one = new Date(start);
  let two = new Date(end);
  

  if (one < two) {
    result = two - one;
  } else  {
   one - two;
  }

  let msecond = 1000;
  let secInHours = 3600;
  let hoursInDay = 24;

  let distanceInDays = Math.floor(result / (msecond * secInHours * hoursInDay));
  let distanceInMonth = Math.floor(result / (msecond * secInHours * hoursInDay * 30));
  let distanceInYears = Math.floor(result / (msecond * secInHours * hoursInDay * 30 * 12));
  if (distanceInDays == 1) {
    return `${distanceInDays} Day`;
  } else if (distanceInMonth > 12) {
    return `${distanceInYears} Years`;
  } else if (distanceInDays >= 30) {
    return `${distanceInMonth} Month `;
  } else if (distanceInDays > 1) {
  } else if (distanceInDays > 1) {
    return `${distanceInDays} Days`;
  }
}

      <label for="start">start</label>
    <input type="date" name="" id="start" value="2018-07-22" />

    <label for="end">end</label>
    <input type="date" name="" id="end" value="2018-08-22" />
    <button onclick="abc()">btn</button>
    <div id="pos">
      <p>duration:</p>
    </div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/493287.html

標籤：javascript html 功能 dom

上一篇：localStorage正在更新但面臨輸出問題，false被解釋為true

下一篇：Javascript-在向嵌套物件添加新欄位時合并物件