设置 JavaScript (element.value) 中出现在 html 表单外的字符串变量的颜色

Question

这是一个帮助大型项目的简单示例 -

期望的结果：当您在表单框中键入姓名时，会出现一个包含该姓名的句子。但是，只有名称应该有红色，并且只有在结果中（出现在表单框中时不应该是红色）。

当我在此代码中包含“nameHere.style.color”时出现错误：

JS:

function getResponse(){
  var nameHere = document.getElementById("name").value;
  nameHere.style.color = "red";
  var resultValue = "Hello my name is " + nameHere + ", nice to meet you.";
  document.getElementById("result").innerHTML = resultValue;
}

HTML:

 <div class="formclass">
      <label for="name">Input name here</label>
      <input id="name" onchange="getResponse()"></input>
 </div>

<div id="result"></div>

有什么真正的方法可以在 JavaScript 内完成我想做的事情吗？

编辑：强调一下，我确实想更改采用元素的变量的颜色。值 - 不仅仅是元素。我希望它作为颜色出现在结果中。我找不到任何可以让我正确执行此操作的东西。

Answer 1

基本上，您将样式应用于元素，而不是原始文本。在您的代码中，您试图设置一段原始文本的 style 属性，它没有 style 属性，因此会出错。在这种情况下，您需要添加一个元素来区分您的输出name。从那里，您可以准备好 class（我称这个为 .theName）并将 class 名称应用于元素，或者您可以直接设置样式（就像您尝试的那样) 通过脚本。我在这里展示了这两个例子。第二个使用 setTimeout - 这只是为了在更改颜色之前允许短暂的延迟 - 这只是为了说明目的。

function getResponse(){
  let nameHere = document.getElementById("name").value;
  let resultValue = `Hello my name is <span class='theName'>${nameHere}</span>, nice to meet you.`;
  document.getElementById("result").innerHTML = resultValue;

  // or if you want to change the element after it's been written to the page
  setTimeout(() => {
    document.querySelector('.theName').style.color='blue';
  }, 1000);
}

.theName{
color:red;
}

 <div class="formclass">
      <label for="name">Input name here</label>
      <input id="name" onchange="getResponse()"></input>
 </div>

<div id="result"></div>

Answer 2

当然，您只需要使用像 span 这样的元素而不是文字字符串。

const input = document.getElementById("name");
const result = document.getElementById("result");

function getResponse() {
  
  const name = input.value;
  
  let nameWrapper = document.createElement('span');
  nameWrapper.style.color = 'red';
  nameWrapper.innerText = name;
  
  result.innerHTML = '';
  result.appendChild(document.createTextNode('Hello my name is '));
  result.appendChild(nameWrapper);
  result.appendChild(document.createTextNode(', nice to meet you.'));
}

<div class="formclass">
    <label for="name">Input name here</label>
    <input id="name" onchange="getResponse()">
</div>

<div id="result"></div>

设置 JavaScript (element.value) 中出现在 html 表单外的字符串变量的颜色

Set the color of a string variable in JavaScript (element.value) when it appears in html outside of a form

html

javascript

css

variables

colors