How to change iFrame src with a default value when the original src does not exist?

<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
  </head>

  <body>
    <header>
      <h1>Home</h1>
    </header>
    <main>
      <form id="ui">
        <fieldset>
          <legend><h2>Timeline</h2></legend>
          <label
            >Year:
            <input
              id="year"
              type="number"
              min="2000"
              max="2099"
              maxlength="4"
              size="4"
              value="2000"
            />
          </label>
          <button id="btn" type="button">Ok</button>
          <sup title="Enter year - 2000 to 2099">🛈</sup>
        </fieldset>
        <object id="view" data="timeline/2000.html" type="text/html"></object>
      </form>
    </main>
    <script src="lib/script.js"></script>
  </body>
</html>

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  user-select: none;
}

:root {
  font-size: clamp(1rem, 0.565rem + 2.174vw, 2.25rem);
  font-family: 'Segoe UI';
  line-height: 1.5;
}

body {
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

header {
  padding-left: 1rem;
  margin-bottom: -1rem;
}

h1,
h2 {
  font-variant: small-caps;
}

main {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

form {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

fieldset {
  display: flex;
  gap: 0.5rem;
  width: fit-content;
}

button,
input {
  font: inherit;
}

input {
  font-family: Consolas;
  text-align: right;
}

sup {
  position: relative;
  top: calc(-0.83rem + 3.32px);
  padding: 0.25rem;
  font-size: calc(0.5rem + 4px);
  vertical-align: baseline;
}

button,
sup {
  cursor: pointer;
}

const ui = document.forms.ui;
const io = ui.elements;
const view = io.view;
const path = 'https://run.plnkr.co/preview/cmc6noodp000k356yrqyvazbk/timeline/';
const min = 2000;
const max = 2099;
const def = '404.html';
let pathArray;

const generatePaths = (path, min, max) => {
  const size = max - min;
  return [...Array(size)].map((_, idx) => {
    return path + (min + idx) + '.html';
  });
};

const pathStatus = (path, def) => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', path, true);
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
      if (xhr.status === 404) {
        return def;
      } else if (xhr.status === 200) {
        return path;
      } else {
        return xhr.status;
      }
    }
  };
  request.send();
};

const setPaths = (paths, def) => {
  return paths.map((p) => {
    return pathStatus(p, def);
  });
};

const goTo = (e) => {
  const y = io.year.valueAsNumber;
  const idx = y - min;
  io.view.data = pathArray[idx];
};

const init = () => {
  const paths = generatePaths(path, min, max);
  pathArray = setPaths(paths, def);
  io.btn.onclick = goTo;
};

init();

<h1>2000</h1>

<h1>2011</h1>

<h1>2022</h1>

<h1>2033</h1>

<h1>2044</h1>

<h1>2055</h1>

<h1>2066</h1>

<h1>2077</h1>

<h1>2088</h1>

<h1>2099</h1>

<h1>404</h1>

<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
  </head>

  <body>
    <header>
      <h1>Site Map</h1>
    </header>
    <main>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="404.html">404</a></li>
          <li><a href="timeline/2000.html">2000</a></li>
          <li><a href="timeline/2011.html">2011</a></li>
          <li><a href="timeline/2022.html">2022</a></li>
          <li><a href="timeline/2033.html">2033</a></li>
          <li><a href="timeline/2044.html">2044</a></li>
          <li><a href="timeline/2055.html">2055</a></li>
          <li><a href="timeline/2066.html">2066</a></li>
          <li><a href="timeline/2077.html">2077</a></li>
          <li><a href="timeline/2088.html">2088</a></li>
          <li><a href="timeline/2099.html">2099</a></li>
        </ul>
      </nav>
    </main>
    <script src="lib/script.js"></script>
  </body>
</html>