Display function result to html-CodePudding

<!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`;
  } 
}

enter image description hereI'm having trouble with javascript. I made a website that calculates the start date and end date, where the values of the start date and end date are taken from user data. I was able to make the calculation as a function, but I am confused about how to display the results on the web. Maybe you guys can help, thanks in advance:) I have also included javascript and html code.

CodePudding user response：

You can hook to input elements (start, end) on input. Something like:

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

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

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

Needs refinement but you get the idea

CodePudding user response：

You had some errors there. I fixed them. Hope this helps.

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 and end were undefined in renderPost. You also don't need to call takeTheTime function in abc.

CodePudding user response：

There are a couple of smaller erros which keep your date from being shown.

#1

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

Here you call the takeTheTime() function with the parameters start and end. Those are local variables just valid inside the scope of the function. So the function will always return undefined. So you either need to provide the values directly e.g. takeTheTime(document.getElementById('start').value, document.getElementById('end').value)

or make start and end global variables.

#2

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

dua is not defined but I guess you meant two. Anyway, the second case one > two is missing.

If we put it together:

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>