一段時間后，頁面在HTML、javascript中提交表單時被重置-有解無憂

在我創建的 HTML 頁面中，我有兩個 url 輸入。一個用于網站，一個用于影像 url。將顯示 URL 處的鏈接和影像。但是當我提交時，頁面會在顯示結果后幾秒鐘后重置。我在這里附上我的最小可重現代碼。當只有一個輸入是 https 時，它不會以其他方式作業。為什么會這樣。也沒有錯誤。
HTML 檔案

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>demo</title>
<script type = "text/javascript" src="script.js"></script>
<body>
<form>
<label for="Website" >Website</label>
<input type="url"  id="Website" >
<label for="ImageLink" >Image Link</label>
<input type="url"  id="ImageLink" >
<button type="submit"  onclick="displayDetails()" id="submit">Submit</button>
</form>
<table id="display">
<tr>
    <th>Description</th>
    <th>Image</th>
</tr>
</table>
</body>
</html>

腳本如下：
script.js：

var row  = 1;
var submit = document.getElementById("submit");
submit.addEventListener("submit",displayDetails);

function displayDetails(){
var website = document.getElementById('Website').value;
var imageSrc = document.getElementById('ImageLink').value;
var display = document.getElementById("display");
var Row = display.insertRow(row);
var cell = Row.insertCell(0);
var cell2 = Row.insertCell(1);
web = website.link(website);
cell.innerHTML =  web ;
img  =  document.createElement("img");
img.src = imageSrc;
cell2.appendChild(img);
row  ;
}

如果我輸入沒有 https 的隨機網站名稱，那么它可以作業，但當兩者都是有效的 https 網站時則不行。

uj5u.com熱心網友回復：

這是因為每當提交表單時，默認觸發重繪事件。您必須防止這種行為。如下更新您的代碼。

將引數傳遞event給您的函式。

<button type="submit onclick="displayDetails(event)" id="submit">Submit</button>

此外，您必須按如下方式更新您的 JavaScript 函式

function displayDetails(e) {
  e.preventDefault();
  var website = document.getElementById("Website").value;
  var imageSrc = document.getElementById("ImageLink").value;
  var display = document.getElementById("display");
  var Row = display.insertRow(row);
  var cell = Row.insertCell(0);
  var cell2 = Row.insertCell(1);
  web = website.link(website);
  cell.innerHTML = web;
  img = document.createElement("img");
  img.src = imageSrc;
  cell2.appendChild(img);
  row  ;
}

請注意，引數event被接收為e并且默認行為被阻止e.preventDefault()

uj5u.com熱心網友回復：

String.prototype.link()已棄用。只需使用<a>標簽。
你web的代碼中有什么？為什么要onclick在 html 中定義并在 js 中添加事件監聽器？這樣的事情遲早會給你帶來奇怪的問題。
表單中的按鈕提交表單，從而導航到 url。只需將按鈕添加event.preventDefault()或移動到表單之外。

var row = 1;
var xyz = document.getElementById("xyz");
xyz.addEventListener("click", (event) => displayDetails(event));

function displayDetails(event) {
  event.preventDefault();
  
  var website = document.getElementById("Website").value;
  var imageSrc = document.getElementById("ImageLink").value;
  var display = document.getElementById("display");
  console.log(website, imageSrc, display)
  
  var row = display.insertRow(row);
  var cell = row.insertCell(0);
  var cell2 = row.insertCell(1);
  
  const aTag = document.createElement('a');
  aTag.href = website;
  aTag.innerText = website;
  cell.appendChild(aTag);
  
  img = document.createElement("img");
  img.src = imageSrc;
  cell2.appendChild(img);
  
  console.log(display)
  
  row  ;
}

<form>
  <label for="Website">Website</label>
  <input type="url" id="Website">
  <label for="ImageLink">Image Link</label>
  <input type="url" id="ImageLink">
  <button id="xyz">Submit</button>
</form>

<table id="display">
  <tr>
    <th>Description</th>
    <th>Image</th>
  </tr>
</table>

uj5u.com熱心網友回復：

我認為添加此代碼將解決您的問題 event.preventDefault();

submit.addEventListener("submit",(event)=>{
event.preventDefault();
// your function displayDetails code

});

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/508276.html

標籤：javascript html https

上一篇：使用React如何在每次選中復選框時附加到字串并顯示在另一個輸入文本欄位中

下一篇：添加行時如何使用innerHTML格式化所有行，如第1行？