[英]How can I display text content on the same page in JavaScript?
我正在制作電影分級應用程序，因此當您單擊添加按鈕時，將彈出一個表單。 用戶填寫完表單后，我希望頁面顯示表單的文本值，例如，如果有人在第一個字段中寫了Lion King，則頁面應在文檔下方某處顯示電影標題：Lion King，但仍在同一頁。 我嘗試使用tbh可以正常工作的document.write方法，但是使用它並不是很好，我想將值顯示在同一頁上，而不是在另一頁上。 我也嘗試過.innerHTML，它仍然無法正常工作，但也許我只是在做錯什么。 我的JavaScript不夠先進，請嘗試幫助我。
document.getElementById("add").addEventListener('click', function() { document.querySelector(".bg-modal").style.display = 'flex'; }); document.querySelector(".close").addEventListener('click', function(){ document.querySelector(".bg-modal").style.display = 'none'; }); const movie = document.getElementById("movie"); document.getElementById("rate"); document.getElementById("link"); document.getElementById("des"); document.getElementById("s").onclick = function() { document.querySelector(".bg-modal").style.display = 'none'; document.write("<h1 id = 'mt'>" + "Movie Title" + " : " + movie.value + "</h1>") }
body { background-color:black; } #add { width:100px; height:100px; background:url("https://i.ibb.co/HCW4rRn/icons8-add-100.png"); border:none; position:absolute; top:250px; bottom:0; left:610px; right:0; cursor:pointer; } p { color:white; font-weight:bold; position:absolute; top:360px; left:455px; } .bg-modal{ width:100%; height:100%; position:absolute; top:0; display:flex; justify-content:center; align-items:center; display:none; } .modal-content{ width:500px; height:300px; background:linear-gradient(42deg, #403B4A,#E7E9BB); border-radius:5px; position:relative; } .close{ position:absolute; top:0; right:14px; font-size:32px; transform:rotate(45deg); cursor:pointer; } h1 { font-family: 'Hanalei', cursive; } h4 { font-family: 'Kanit', sans-serif; position:absolute; left:85px; } #des{ width:150px; height:50px; position:absolute; left:150px; top:190px; border-color:black; } #movie { position:absolute; left:135px; border-color:black; } #rate { position:absolute; left:315px; } #link { position:absolute; left:140px; top:140px; border-color:black; } #s { border-color:white; text-weight:bold; position:absolute; left:195px; top:265px; } #result { color:white; }
<!DOCTYPE html> <html> <head> <title>Movie Rating App</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Hanalei|Kanit&display=swap" rel="stylesheet"> </head> <body> <input type ="button" id = "add"></input> <p>Welcome to the Movie Rating App, here you can add <br> all of your favorite Movies and TV shows and give them<br> ratings so that if you don't know what to watch you can<br> always come back here. Click the add button to get started. :)</p> <div class = "bg-modal"> <div class = "modal-content"> <div class = "close">+</div> <h1 align = "center">PLEASE FILL OUT THIS FORM</h1> <input type = "text" id = "movie" placeholder = "Movie Name "> <select id = "rate"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <h4>Please put a link for the movie cover</h4> <input type = "url" id = "link" placeholder = "www.example.img.com"> <br> <br> <input type = "text" placeholder = "Movie Description" id = "des" maxlength = "100"> <br> <input type = "submit" id = "s"> </div> </div> </body>
使用document.write您將替換頁面的整個DOM。 這就是為什么它現在是“新”頁面的原因。 您需要的是更狹窄的選擇器。
document.getElementById("add").addEventListener('click', function() { document.querySelector(".bg-modal").style.display = 'flex'; }); document.querySelector(".close").addEventListener('click', function(){ document.querySelector(".bg-modal").style.display = 'none'; }); const movie = document.getElementById("movie"); // WHAT IS HAPPENING HERE???? You are selecting a bunch of elements and not doing anything with it document.getElementById("rate"); document.getElementById("link"); document.getElementById("des"); document.getElementById("s").onclick = function() { document.querySelector(".bg-modal").style.display = 'none'; var newEl = document.createElement("p"); newEl.innerHTML = "Movie Title" + " : " + movie.value; // Now append the new tag you created to selectedMovies div children document.getElementById('selectedMovies').appendChild(newEl); }
body { background-color:black; } #add { width:100px; height:100px; background:url("https://i.ibb.co/HCW4rRn/icons8-add-100.png"); border:none; position:absolute; top:250px; bottom:0; left:610px; right:0; cursor:pointer; } p { color:white; font-weight:bold; position:absolute; top:360px; left:455px; } .bg-modal{ width:100%; height:100%; position:absolute; top:0; display:flex; justify-content:center; align-items:center; display:none; } .modal-content{ width:500px; height:300px; background:linear-gradient(42deg, #403B4A,#E7E9BB); border-radius:5px; position:relative; } .close{ position:absolute; top:0; right:14px; font-size:32px; transform:rotate(45deg); cursor:pointer; } h1 { font-family: 'Hanalei', cursive; } h4 { font-family: 'Kanit', sans-serif; position:absolute; left:85px; } #des{ width:150px; height:50px; position:absolute; left:150px; top:190px; border-color:black; } #movie { position:absolute; left:135px; border-color:black; } #rate { position:absolute; left:315px; } #link { position:absolute; left:140px; top:140px; border-color:black; } #s { border-color:white; text-weight:bold; position:absolute; left:195px; top:265px; } #result { color:white; } #selectedMovies { position: relative; top: 150px; }
<!DOCTYPE html> <html> <head> <title>Movie Rating App</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Hanalei|Kanit&display=swap" rel="stylesheet"> </head> <body> <input type ="button" id = "add"></input> <p>Welcome to the Movie Rating App, here you can add <br> all of your favorite Movies and TV shows and give them<br> ratings so that if you don't know what to watch you can<br> always come back here. Click the add button to get started. :)</p> <div id="selectedMovies"></div> <div class = "bg-modal"> <div class = "modal-content"> <div class = "close">+</div> <h1 align = "center">PLEASE FILL OUT THIS FORM</h1> <input type = "text" id = "movie" placeholder = "Movie Name "> <select id = "rate"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <h4>Please put a link for the movie cover</h4> <input type = "url" id = "link" placeholder = "www.example.img.com"> <br> <br> <input type = "text" placeholder = "Movie Description" id = "des" maxlength = "100"> <br> <input type = "submit" id = "s"> </div> </div> </body>
如何使用Javascript將另一個網頁上的文本顯示到另一個頁面上？
[英]How can I use Javascript to display text from another web page onto a different page?
如何從同一頁面上的Ajax加載內容訪問javascript函數？
[英]How can i access javascript functions from ajax loaded content on the same page?
如何使用 HTML/CSS/Javascript 在同一頁面上的內容之間切換？
[英]How can I switch between content on the same page using HTML/CSS/Javascript?
如何在加載 web 頁面時讓文本與其他元素同時顯示？
[英]How can I get text to display at the same time as other elements on load of a web page?
如何使用 JavaScript 等待單擊一個頁面，然后將存儲在帶有對象的數組中的數據顯示在另一頁上
[英]how can I use JavaScript to wait for a click on one page then take data stored in an array with objects to display it's content on another page
如何使用 PHP 或 JavaScript 在網頁正文中顯示描述元標記的內容？
[英]How can I use either PHP or JavaScript to display the contents of the description meta tag in the body text of a web page?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.