実現したいこと
ウェブブラウザで疑似的なRSSリーダーを作成したい
前提
独学でHTMLとJavaScriptを勉強中です。
この度、ウェブブラウザ上で疑似的なRSSリーダーを作成したいと思ったのですが、製作中にエラーが発生したため、どのように解決すべきか、お力頂ければと思います。
発生している問題・エラーメッセージ
app4.js:8 Uncaught TypeError: Cannot read properties of null (reading 'getElementsByTagName') at xhttp.onreadystatechange (app4.js:8:24)
該当のソースコード
html
1<!DOCTYPE html>2<html>3<head>4 <title>RSSリーダー</title>5 <meta charset="utf-8">6 <meta name="viewport" content="width=device-width, initial-scale=1">7 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>9 <script src="app4.js"></script>10</head>11<body>12 <div class="container">13 <h1>RSSリーダー</h1>14 <form class="form-inline">15 <div class="form-group">16 <label for="url">URL:</label>17 <input type="text" class="form-control" id="url" placeholder="Enter URL" size="50">18 </div>19 <button type="button" class="btn btn-primary" onclick="fetchRSS()">情報取得</button>20 </form>21 <br>22 <div id="result"></div>23 </div>24</body>25</html>
JavaScript
1function fetchRSS() {2 var url = document.getElementById("url").value;3 if (url) {4 var xhttp = new XMLHttpRequest();5 xhttp.onreadystatechange = function() {6 if (this.readyState == 4 && this.status == 200) {7 var xmlDoc = this.responseXML;8 var items = xmlDoc.getElementsByTagName("item");9 var resultHtml = "";10 for (var i = 0; i < items.length; i++) {11 var title = items[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;12 var link = items[i].getElementsByTagName("link")[0].childNodes[0].nodeValue;13 resultHtml += "<p><a href='" + link + "' target='_blank'>" + title + "</a></p>";14 }15 document.getElementById("result").innerHTML = resultHtml;16 }17 };18 xhttp.open("GET", "https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent(url), true);19 xhttp.send();20 }21}22
0 コメント