innerHTML 無法正常工作 Javascript

Question

當按下“提交”btn 時，我需要顯示“已添加到”（鏈接）的鏈接。 我是 Javascript 的新手。 我編碼了這樣的東西，但它不起作用。

var form = document.getElementById("form");

form.addEventListener("submit", function(event) {
event.preventDefault();

var link = document.getElementById("link");
var url = document.getElementById("url");

var news = "The link to" + link + "was successfully added";
document.getElementById("new").innerHTML = news;

Answer 1

您必須獲得輸入的.value 。 檢查這個。

 var form = document.getElementById("form"); form.addEventListener("submit", function(event) { event.preventDefault(); var link = document.getElementById("link"); var url = document.getElementById("url"); var news = "The link to " + link.value + " was successfully added"; document.getElementById("new").innerHTML = news; })

 <form id="form"> <input type="text" id="url" /> <br> <input type="text" id="link" /> <br> <input type="submit"/> </form> <h1 id="new"> </h1>

Answer 2

根據您對上述問題的評論：

它在瀏覽器中返回此信息“已成功添加到[對象 HTMLInputElement] 的鏈接”

聽起來像.innerHTML工作得很好。 您只是想輸出整個 HTML 元素，而不僅僅是它所擁有的值：

var link = document.getElementById("link").value;