JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>PIXNET API 練習 - 版本3</title>
</head>
<body>
    <h2>PIXNET 熱門文章（分類 23：美容彩妝）</h2>

    <button id="prevBtn">上一頁</button>
    <span id="pageInfo">目前頁碼：1</span>
    <button id="nextBtn">下一頁</button>

    <hr>

    <div id="result"></div>

    <script>
        var resultDiv = document.getElementById("result");
        var pageInfo = document.getElementById("pageInfo");
        var prevBtn = document.getElementById("prevBtn");
        var nextBtn = document.getElementById("nextBtn");

        var currentPage = 1;

        // 載入指定頁碼
        function loadPage(page) {
            var url = "https://emma.pixnet.cc/mainpage/blog/categories/hot/23"
                + "?page=" + page
                + "&per_page=10"
                + "&api_version=2"
                + "&format=json";

            fetch(url)
                .then(function (response) {
                    return response.json();
                })
                .then(function (data) {
                    resultDiv.innerHTML = "";

                    if (!data.articles || data.articles.length === 0) {
                        resultDiv.innerHTML = "查無資料";
                        return;
                    }

                    var ul = document.createElement("ul");

                    for (var i = 0; i < data.articles.length; i++) {
                        var item = data.articles[i];

                        var li = document.createElement("li");
                        li.innerHTML =
                            "標題：" + item.title + "<br>" +
                            "作者：" + item.user.name + "<br>" +
                            "<a href='" + item.link + "' target='_blank'>前往文章</a><br><br>";

                        ul.appendChild(li);
                    }

                    resultDiv.appendChild(ul);
                    pageInfo.textContent = "目前頁碼：" + page;
  ...