堆棧內存溢出
  簡體   English   中英

如何更新 JavaScript 生成的 HTML 變量

[英]How to update a JavaScript generated HTML variable

 原文  2020-12-23 22:37:32  8   4    javascript/ html/ button/ event-listener

問題描述

我創建了這個小背景顏色轉換器只是為了好玩和玩一下 JS，但我遇到了一個我真的不知道如何解決的問題。

這是我的 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="script.js" defer></script>
  <link rel="stylesheet" href="style.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <title>Color picker</title>
</head>
<body>

  <div class="container d-flex align-items-center justify-content-center">
      <div>
        <button id="main_button" class="btn btn-danger">Change color</button>
      </div>
  </div>

</body>
</html>

和我的 JS：

const button = document.querySelector("#main_button");

function randomColor(){
  let letters = "0123456789ABCDEF";
  let color = "#";
  for(let i = 0; i < 6; i++){
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};

function changeBackground(){
  document.body.style.backgroundColor = randomColor();
};

function createParagraph(){
  let color = randomColor();
  const div = document.querySelector(".container");
  let par = document.createElement("p");
  par.innerHTML = "Current color is " + color;
  div.appendChild(par);
}

button.addEventListener("click", changeBackground);
button.addEventListener("click", createParagraph);

這是我的問題，每次我單擊按鈕時，都會使用新的顏色代碼生成一個新段落。 但我希望按鈕更新同一段落中的顏色代碼。 在此處輸入圖像描述

4 個解決方案

解決方案1
 2  2020-12-23 22:49:42

每次點擊時，您都會添加另一個 p 標簽 - 而不是在 html 頁面中創建 ap 標簽 -

<p id="colorTag"><p>

在你的 createParagraph function - 而不是let par = document.createElement("p"); let par = document.getElementById('colorTag') par.innerHTML = "Current color is " + color;

解決方案2
 1 已采納  2020-12-24 01:03:37

每次調用createParagraph()時，您實際上都是在創建一個新的<p>元素。

相反，您可以事先在 HTML 中創建一個標簽，並將其引用（您可以通過使用例如document.querySelector()查詢它來獲取）保存在一個變量中。
然后，您可以通過為其.textContent屬性分配一個新值來更改其內容。

這里有一個演示： 

 var pElement = document.querySelector('#p-id'); document.querySelector('button').addEventListener('click', () => { pElement.textContent = "This is its new text, assigned using the '.textContent'-property;"; });
 <button>Change &lt;p&gt;'s content.</button> <p id="p-id">This is the initial text.</p>

一個重要的注意事項是，您實際上並沒有顯示當前的顏色值。 您調用randomColor()兩次：一次在changeBackground()中，一次在createParagraph()中，而創建的顏色僅用於為<body>分配新的背景顏色或使用<p> -標簽顯示。

要顯示實際使用的顏色，您需要對<p>的內容的賦值和值使用相同的 String。 您可以通過以下方式之一做到這一點：

  1. 在一個 function 中編寫兩個用例
  2. 為顏色使用另一個變量
  3. 使用document.body.style.background的值（或.backgroundColor ，取決於您使用的內容）。 但是，這將以rgb(123, 213, 132)之類的格式返回顏色，這可能是不需要的。

我將展示第 1 點和第 2 點的示例。

第 1 點可能如下所示： 

 const button = document.querySelector('#main_button'); const pElement = document.querySelector('#p_id'); function randomColor(){ let letters = "0123456789ABCDEF"; let color = "#"; for(let i = 0; i < 6; i++){ color += letters[Math.floor(Math.random() * 16)]; } return color; } function changeAndUpdateColor() { let color = randomColor(); document.body.style.background = color; pElement.textContent = 'Current Color is ' + color; } button.addEventListener('click', changeAndUpdateColor);
 <button id="main_button">Change Color</button> <p id="p_id"></p>

第 2 點可能如下所示： 

 const button = document.querySelector('#main_button'); const pElement = document.querySelector('#p_id'); var color = ''; function randomColor(){ let letters = "0123456789ABCDEF"; let color = "#"; for(let i = 0; i < 6; i++){ color += letters[Math.floor(Math.random() * 16)]; } return color; } function changeBackground() { document.body.style.background = color; } function updateParagraph() { pElement.textContent = 'Current Color is ' + color; } function getNewColor() { color = randomColor(); } button.addEventListener('click', getNewColor); button.addEventListener('click', changeBackground); button.addEventListener('click', updateParagraph);
 <button id="main_button">Change Color</button> <p id="p_id"></p>

但是，使用這么多函數和偵聽器會使代碼看起來很笨拙。 相反，您應該使用 ES6 的function 表達式或箭頭 function 表達式。

當使用 function 表達式時，我們可以初始化並使用內部的顏色變量，使全局變量無用。 

 const button = document.querySelector('#main_button'); const pElement = document.querySelector('#p_id'); function randomColor(){ let letters = "0123456789ABCDEF"; let color = "#"; for(let i = 0; i < 6; i++){ color += letters[Math.floor(Math.random() * 16)]; } return color; } button.addEventListener('click', function() { let color = randomColor(); document.body.style.background = color; pElement.textContent = 'Current Color is ' + color; });
 <button id="main_button">Change Color</button> <p id="p_id"></p>

說到全球背景：
在全局上下文中聲明許多變量和/或函數將污染全局命名空間，並且用戶可以訪問，例如使用瀏覽器控制台。 對於處理或訪問敏感數據的函數來說，這是一個問題。

為了釋放全局命名空間，我們可以將大部分腳本放在所謂的IIFE中，即立即調用的 function 表達式。 添加它就像將代碼放入這樣的代碼中一樣簡單：

(function() {
  // Your code ...
})();

function 表達式本身的括號會將其分組，以便可以使用調用方括號()執行它，就像在括號內放置一個數字將允許我們在其上調用 function 一樣，如下所示：

(123).toString();

現在還有一點需要注意的是，塊內的function 聲明（意味着：當未在全局上下文中聲明時）不是 ECMAScript 的一部分，這使其成為非標准化功能。 這可能與您無關，因為無論如何大多數（如果不是全部）現代瀏覽器都支持它。 但是，在這些情況下，應該使用變量引用的 function 表達式，例如：

(function() {
  var aFunction = function() {
    // ...
  };
  
  aFunction(); // Executed as usual
})();

請注意，與 function 聲明不同，function 表達式不會被提升，這意味着它們需要在代碼中使用之前出現。
像訪問數組條目一樣訪問字符串的字符是另一個非標准化功能，在大多數瀏覽器中同樣支持。 標准化的方法是使用String.charAt() 。

重構代碼可能如下所示： 

 // Is OK to be globally accessible function randomColor(){ let letters = "0123456789ABCDEF"; let color = "#"; for(let i = 0; i < 6; i++){ color += letters.charAt(Math.floor(Math.random() * 16)); } return color; } // Should be placed inside an IIFE; the global context is still accessible (function() { const button = document.querySelector('#main_button'); const pElement = document.querySelector('#p_id'); button.addEventListener('click', function() { let color = randomColor(); document.body.style.background = color; pElement.textContent = 'Current Color is ' + color; }); })();
 <button id="main_button">Change Color</button> <p id="p_id"></p>

解決方案3
 0  2020-12-23 22:50:40

如果我理解正確，那么您想將背景顏色更改為最新的段落顏色。 因此，您必須在 createParagraph function 中調用 changebackground function：

function createParagraph(){
  let color = randomColor();
  const div = document.querySelector(".container");
  let par = document.createElement("p");
  par.innerHTML = "Current color is " + color;
  div.appendChild(par);
  changeBackground(color);
}

function changeBackground(newcolor){
  document.body.style.backgroundColor = newcolor;
};

button.addEventListener("click", createParagraph);

這將完成這項工作。

解決方案4
 0  2020-12-23 22:55:59

您每次都創建一個新段落 -

HTML 文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="script.js" defer></script>
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0- 
      beta1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384- 
       giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />
    <title>Color picker</title>
  </head>
  <body>
    <div class="container d-flex align-items-center justify-content-center">
      <div>
        <button id="main_button" class="btn btn-danger">Change color</button>
      </div>
      <p id="par"></p> <!-- <== You Need this for render every time color -->
    </div>

    <script src="./script.js"></script>
  </body>
</html>

JS 文件：

const button = document.querySelector("#main_button");

function randomColor() {
  let letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function changeBackground() {
  document.body.style.backgroundColor = randomColor();
}

function createParagraph() {
  let color = randomColor();
  const div = document.querySelector(".container");
  let par = document.getElementById("par"); // select paragraph as html file
  par.innerHTML = "Current color is " + color; // and render color to paragraph
}

button.addEventListener("click", changeBackground);
button.addEventListener("click", createParagraph);

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 html 存儲在 javascript 變量中，如何更新 javascript 變量中的 html 如何使用javascript變量更新HTML中的span元素？ 如何異步更新Javascript中動態生成的HTML控件 如何刪除從razor var生成的HTML到Javascript變量？ 如何檢索由JavaScript生成的HTML 無法更新javascript / html函數中的全局變量 如何查看用於Internet Explorer的javascript生成的html？ 如何獲取用javascript生成的HTML？ 如何在Android上獲取JavaScript生成的HTML 如何使用JavaScript生成的HTML進行jQuery操作？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM