更改HTML文本 <h1> 不工作嗎？ 我是否正確鏈接了app.js？
[英]Changing text of HTML <h1> not working? Did I link app.js correctly?
問題描述
我正在新機器上從零開始練習基礎知識，無法更改標題中的文本。 由於某種原因，app.js似乎沒有與我的index.html文件鏈接。
這是我在app.js文件中擁有的：
document.getElementsByClassName（“ title1”）。innerHTML ='測試123';
我是否正確鏈接了app.js？ 是因為我還鏈接了其他js文件（引導程序，jquery和popper）嗎？
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Website Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0">
<h1 class = "title1" id="testing11">My First Bootstrap 4 Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
我希望標題中的文本會更改。
謝謝！
5 個解決方案
解決方案1
2 2019-06-11 22:49:03
getElementsByClassName("title1")返回類似數組的對象，請使用getElementById("testing11")或getElementsByClassName("title1")[0]代替
解決方案2
2 已采納 2019-06-11 22:49:33
getElementsByClassName返回一個數組，其中包含文檔中所有指定的元素。 您可以按元素索引訪問元素。 您可以從W3Schools中了解有關該方法的更多信息。
在您的情況下，您正在訪問具有該屬性的第一個元素，因此該元素的索引將為0。您可以從W3Schools了解有關索引和數組的更多信息。
document.getElementsByClassName('title1')[0]
我注意到您在項目中使用jQuery，這啟用了另一種方法。 您可以從learn.jQuery了解更多信息
$(".title1")[0].innerHTML = 'Testing 123';
我還建議您將javascript附加到頁面正文的底部，以使折疊內容上方的內容最小化，以使網站加載速度更快。 您可以從Google的開發人員文檔中了解更多信息。
//app.js document.getElementsByClassName("title1")[0].innerHTML = 'Testing 123';
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap 4 Website Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <style> .fakeimg { height: 200px; background: #aaaaaa; } </style> </head> <body> <div class="jumbotron text-center" style="margin-bottom: 0"> <h1 class="title1" id="testing11">My First Bootstrap 4 Page</h1> <p>Resize this responsive page to see the effect!</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="app.js"></script> </body> </html>
解決方案3
1 2019-06-11 23:07:21
getElementsByClassName函數返回一個數組。 因此，您需要處理該數組中的第一個元素，然后才能訪問innerHTML屬性。 試試這個... document.getElementsByClassName（“ title1”）[0] .innerHTML ='Testing 123'; 或.. Var標頭= document.getElementsByClassName（“ title1”）[0]; header.innerHTML ='測試123'; 雖然..在此示例中，最好的解決方案是接近h1元素，但前提是我給了他，而document.getElementById函數返回單個元素。 像這樣... document.getElementById（'testing11'）。innerHTML ='Testing 123';
解決方案4
0 2019-06-11 22:48:33
第一種解決方案：您必須確保index.html和app.js保存在同一文件夾中。 第二種解決方案：單擊F12，然后轉到“控制台”選項卡，並驗證您的html是否正在調用app.js或是否存在任何其他問題。
解決方案5
-1 2019-06-11 22:48:05
html看起來不錯，您可以將腳本移至正文的末尾，並檢查是否已在js文件中隨時使用文檔
如何在此彈出框中獲取 HTML 格式化文本，如：<li> _ _ _ _</li><br><h1> _ _ _ _</h1> ETC
[英]How can i get HTML Formated text in this popup box Like: <li> _ _ _ _</li> <br> <h1> _ _ _ _</h1>etc
將 App.js 更改為 App/index.js 后，基本應用程序無法在 Web 中運行
[英]Basic app not working in Web after changing App.js to App/index.js
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.