Page mouse click interaction

How do I click on the circle button on the page, which is the dot in the html, to make the text appear? Can you help me with my js or give me a complete js? I don't need the jQueryj library, how do I write it in native js?

<!-- 模块1 -->
     <div class="box1">
         <p class="checkcaption">历史查看</p>
         <div class="check">
             <input type="checkbox" id="switch1" name="switch1" class="switch"       >
             <label for="switch1"></label>
         </div>

         <div id="timeline">
             <div class="dot" id="one">
                 <span></span>
                 <date>1280</date>
             </div>
             <div class="dot" id="two">
                 <span></span>
                 <date>1649</date>
             </div>
             <div class="dot" id="three">
                 <span></span>
                 <date>1831</date>
             </div>
             <div class="dot" id="four">
                 <span></span>
                 <date>1992</date>
             </div>
             <div class="inside"></div>
         </div>



         <article class='modal one'>
             <date>26/06 - 1280</date>
             <h2>Yo les gars</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates magnam excepturi laboriosam
                 minima soluta, quae. Sunt repellat totam non, et sed in veniam fuga odio eius! Nesciunt amet optio
                 recusandae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum sit dolor sint amet,
                 corporis aperiam nihil, quas, accusantium enim suscipit rem non possimus officiis. Recusandae hic
                 at, fugiat eos eveniet.</p>
         </article>

         <article class='modal two'>
             <date>08/09 - 1649</date>
             <h2>Salut les louzeurs</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates magnam excepturi laboriosam
                 minima soluta, quae. Sunt repellat totam non, et sed in veniam fuga odio eius! Nesciunt amet optio
                 recusandae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum sit dolor sint amet,
                 corporis aperiam nihil, quas, accusantium enim suscipit rem non possimus officiis. Recusandae hic
                 at, fugiat eos eveniet.</p>
         </article>

         <article class='modal three'>
             <date>21/07 - 1831</date>
             <h2>Eat 'em all !</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates magnam excepturi laboriosam
                 minima soluta, quae. Sunt repellat totam non, et sed in veniam fuga odio eius! Nesciunt amet optio
                 recusandae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum sit dolor sint amet,
                 corporis aperiam nihil, quas, accusantium enim suscipit rem non possimus officiis. Recusandae hic
                 at, fugiat eos eveniet.</p>
         </article>

         <article class='modal four'>
             <date>03/02 - 1992</date>
             <h2>Mais pourquoi?</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates magnam excepturi laboriosam
                 minima soluta, quae. Sunt repellat totam non, et sed in veniam fuga odio eius! Nesciunt amet optio
                 recusandae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum sit dolor sint amet,
                 corporis aperiam nihil, quas, accusantium enim suscipit rem non possimus officiis. Recusandae hic
                 at, fugiat eos eveniet.</p>
         </article>
     </div>

/* 模块1 */
.box1{
  width: 85%;
  height: 550px;
  background-color: pink;
  margin: auto;
}
/* 模块1 时间轴 */
body {
  font-family: arial, sans-serif;
}

.checkcaption {
  text-align: center;
  margin-top: 10px;
}

.check {
  width: 60px;
  height: 30px;
  border: #222 solid 2px;
  position: relative;
  margin: 10px auto;
  border-radius: 15px;
}

.check input {
  visibility: hidden;
  height: 30px;
  width: 60px;
}

.check label {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #e74c3c;
  cursor: pointer;
  position: absolute;
  top: 18%;
  left: 12%;
  transition: all .3s ease;
}

.check input:checked + label {
  left: 55%;
  background-color: #7b3;
}

div#timeline {
  background-color: #aed6f1;
  margin-top: 150px;
  height: 10px;
  width: 100%;
  position: relative;
}

div#timeline .inside {
  position: absolute;
  height: 4px;
  background-color: #fff;
  width: 0%;
  top: 3px;
  left: 0;
}

div#timeline .dot {
  z-index: 99;
  transition: 0.3s ease-in-out;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  top: -15px;
  text-align: center;
  cursor: pointer;
}

div#timeline .dot:nth-child(1) {
  left: 20%;
  background-color: #2c3e50;
}

div#timeline .dot:nth-child(2) {
  left: 40%;
  background-color: #e74c3c;
}

div#timeline .dot:nth-child(3) {
  left: 60%;
  background-color: #7b3;
}

div#timeline .dot:nth-child(4) {
  left: 80%;
  background-color: #236b8e;
}

div#timeline .dot:hover {
  transform: scale(1.2);
}

div#timeline .dot date {
  font-family: roboto;
  font-size: 1.1rem;
  display: block;
  position: relative;
  top: -60px;
  text-align: center;
}

div#timeline .dot span {
  display: inline-block;
  margin-top: 10px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  position: relative;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

article {
  display: none;
  position: relative;
  top: 30px;
  max-width: 960px;
  background-color: #fff;
  padding: 20px;
  margin: auto;
}

article date {
  display: block;
  text-align: right;
}

article h2 {
  font-family: merriweather, sans-serif;
  font-size: 5rem;
  padding: 10px 0;
  border-bottom: solid #111 2px;
  margin-bottom: 20px;
}

article p {
  line-height: 130%;
}
div.mask {
  display: none;
  left: 0;
  top: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 99999;
  }
  
  div.mask article {
  position: relative;
  top: -100%;
  margin-top: 50px;
  max-width: 960px;
  background-color: #fff;
  padding: 20px;
  margin: auto;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
  }
  
  div.mask article date {
  display: block;
  text-align: right;
  }
  
  div.mask article h2 {
  font-family: merriweather, sans-serif;
  font-size: 5rem;
  padding: 10px 0;
  border-bottom: solid #111 2px;
  margin-bottom: 20px;
  }
  
  div.mask article p {
  line-height: 130%;
  }

/* 这段代码使用 jQuery 为网页添加交互性。以下是代码的解释：

第一个代码块定义了四个 dot 元素的点击事件监听器。
当其中一个元素被点击时，它触发一个动画，改变了一个带有 inside 类的元素的宽度。
宽度根据点击的 dot 元素而变为 20%、40%、60% 或 80%。

接下来的代码块检查 switch1 元素是否未被选中。
如果未选中，它将为 dot 元素添加一个点击事件监听器。
当其中一个元素被点击时，它将通过显示带有 mask 类的元素并动画显示带有 article 类的元素来打开模态窗口。
显示的具体模态窗口取决于点击的 dot 元素的 id。

接下来的代码块为 switch1 元素添加一个点击事件监听器。
当此元素被点击时，它会检查它是否被选中。
如果被选中，它将从 modal 元素周围移除 mask 元素并将其隐藏。
它还将为 modal 元素添加一个 nobox 类，并为 dot 元素添加一个点击事件监听器。
当其中一个元素被点击时，它会显示具有 nobox 类的相应 article 元素。

如果 switch1 未被选中，则代码将从 modal 元素中删除 nobox 类并将其包装在 mask 元素中。
它还会为 mask 元素和 dot 元素添加一个点击事件监听器，以根据 switch1 元素是否被选中来打开适当的模态窗口。

总的来说，这段代码允许用户单击 dot 元素以更改带有 inside 类的元素的宽度，
并且还允许用户在 switch1 元素选中或未选中时单击 dot 元素来打开模态窗口。 */
// 获取元素
const dots = document.querySelectorAll(".dot");
const switch1 = document.getElementById("switch1");
const modal = document.querySelector(".modal");
const inside = document.querySelector(".inside");
const articles = document.querySelectorAll("article");

// dot 点击事件
dots.forEach((dot) => {
dot.addEventListener("click", () => {
// 获取点击元素的宽度百分比
const percent = dot.id === "one" ? "20%" :
dot.id === "two" ? "40%" :
dot.id === "three" ? "60%" :
"80%";

// 改变 inside 元素的宽度
inside.style.width = percent;
});
});

// 检查 switch1 是否未被选中
if (!switch1.checked) {
// dot 点击事件
dots.forEach((dot) => {
dot.addEventListener("click", () => {
// 显示 mask 元素和对应的 article 元素
modal.classList.add("active");
modal.classList.add(modal-`${dot.id}`);
articles.forEach((article) => {
    if (article.classList.contains("modal-" + dot.id)) {
article.classList.add("active");
}
});
});
});
}

// switch1 点击事件
switch1.addEventListener("click", () => {
// 检查 switch1 是否被选中
if (switch1.checked) {
// 移除 mask 元素并隐藏 modal 元素
modal.classList.remove("active");
modal.classList.add("nobox");
// dot 点击事件
dots.forEach((dot) => {
dot.addEventListener("click", () => {
// 显示对应的 article 元素
articles.forEach((article) => {
    if (article.classList.contains("modal-" + dot.id)) {
article.classList.add("active");
} else {
article.classList.remove("active");
}
});
});
});
} else {
// 添加 mask 元素并显示 modal 元素
modal.classList.add("active");
modal.classList.remove("nobox");
// dot 点击事件
dots.forEach((dot) => {
dot.addEventListener("click", () => {
// 根据 switch1 是否被选中显示对应的模态窗口
if (switch1.checked) {
articles.forEach((article) => {
article.classList.remove("active");
});
modal.classList.remove("active");
modal.classList.add("nobox");
} else {
modal.classList.add(modal-`${dot.id}`);
articles.forEach((article) => {
    if (article.classList.contains("modal-" + dot.id)) {
article.classList.add("active");
} else {
article.classList.remove("active");
}
});
}
});
});
}
});