如何更新 JavaScript 生成的 HTML 变量

如何解决如何更新 JavaScript 生成的 HTML 变量

我创建这个小背景颜色转换器只是为了好玩和玩 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);

这是我的问题，每次我点击按钮时都会生成一个带有新颜色代码的新段落。但我希望按钮更新同一段落中的颜色代码。

解决方法

每次点击时，您都会添加另一个 p 标签 - 而不是在您的 html 页面中创建一个 p 标签-

<p id="colorTag"><p>

在您的 createParagraph 函数中 - 而不是 let par = document.createElement("p"); 做 let par = document.getElementById('colorTag') par.innerHTML = "Current color is " + color;

每次调用 <p> 时，您实际上都在创建一个新的 createParagraph() 元素。

相反，您可以预先在 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。您可以通过以下方式之一执行此操作：

在一个函数中编写两个用例
为颜色使用另一个变量
使用 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 expressions 或 arrow function expressions。

当使用函数表达式时，我们可以初始化并使用里面的颜色变量，使全局变量无用。

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>

说到global context：
在全局上下文中声明许多变量和/或函数会污染全局命名空间，并且用户可以访问，例如使用浏览器控制台。对于处理或访问敏感数据的函数来说，这是一个问题。

为了释放全局命名空间，我们可以将大部分脚本放在所谓的 IIFE 中，一个立即调用的函数表达式。添加它就像将您的代码放在这样的代码中一样简单：

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

函数表达式本身周围的方括号会将其分组，以便可以使用调用方括号 () 来执行它，就像将数字放在方括号内将允许我们在其上调用函数一样，如下所示：

(123).toString();

进一步说明，function declarations 块内（意味着：当未在全局上下文中声明时）不是 ECMAScript 的一部分，使得这是一个非标准化的功能。这可能与您无关，因为无论如何大多数（如果不是全部）现代浏览器都支持它。但是，在这些情况下，应该使用变量引用的函数表达式，例如像这样：

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

请注意，与函数声明不同，函数表达式不会被提升，这意味着它们需要在代码中使用之前出现。
像访问数组的条目一样访问字符串的字符是另一个非标准化的特性，在大多数浏览器中同样受支持。标准化的方法是使用 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>

如果我理解正确，那么您想将背景颜色更改为最新的段落颜色。因此你必须在 createParagraph 函数中调用 changebackground 函数：

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);

这样就可以了。

你每次都创建一个新段落-

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);

如何更新 JavaScript 生成的 HTML 变量

如何解决如何更新 JavaScript 生成的 HTML 变量

解决方法

相关推荐