如何更改客户端javascript中文本的颜色？答案

【问题标题】：How do I change color of text in client side javascript?如何更改客户端javascript中文本的颜色？
【发布时间】：2021-12-23 14:44:17
【问题描述】：

我正在从输入文本区域向我的 ul 添加一个列表项。我如何根据它是否是回文来改变它的颜色？下面是我的代码的js文件。

function isPalindrome(text){
    return text == text.split('').reverse().join('');
}

const staticForm = document.getElementById('static-form');
let myUl = document.getElementById('list');
const textarea = document.getElementById('text');
staticForm.addEventListener('submit', (event) => {
    event.preventDefault();
    if (isPalindrome(text)==true) textarea.style.color='red';
    else textarea.style.color='blue';
    let li = document.createElement('li');
    li.innerHTML = textarea.value;
    myUl.appendChild(li);
    myForm.reset();
    textarea.focus();
    const result = isPalindrome(textarea)
    
});

HTML：

<main>
        <form id='static-form' method="POST" class="new-post-form">
            <textarea id='text' name='phrase'>
                Attempt here
            </textarea>
        
            <input class="sub-button" type="submit" name="submit" value="Submit" /> 
        </form>
        <ul id='list'></ul>
        
</main>

我知道写 textarea.style.color 是行不通的，最好的方法是什么？

【问题讨论】：

你在哪里写isPalindrome(text) text 来自哪里？ isPalindrome(textarea) 中的 textarea 是什么？应该是isPalindrome(textarea.value) 吗？这些错误可以通过一些简单的调试来修复：（F12 打开开发工具，您可以在控制台选项卡中查看任何错误。）
你说得对，我应该把 text 改成 textarea，改了之后还是没有得到输出，不知道为什么

标签： javascript html forms styles event-listener

【解决方案1】：

function isPalindrome(text) {
        return text === text.split("").reverse().join("");
 }

 const staticForm = document.getElementById("static-form");
 let myUl = document.getElementById("list");
 const textarea = document.getElementById("text");

 const submitBtn = document.getElementById("submit");
 submitBtn.addEventListener("click", (event) => {
        const text = document.getElementById("text").value;
        textarea.style.color = isPalindrome(text) ? "red" : "blue";
        let li = document.createElement("li");
        li.innerHTML = textarea.value;
        myUl.appendChild(li);
        textarea.focus();
        const result = isPalindrome(textarea);
      });

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <main>
      <form id="static-form" method="POST" class="new-post-form">
        <textarea id="text" name="phrase">sample text</textarea
        >

        <input
          class="sub-button"
          id="submit"
          type="button"
          name="submit"
          value="Submit"
        />
      </form>
      <ul id="list"></ul>
    </main>

 
  </body>
</html>

function changeTextareaColor(){
      const textarea = document.getElementById("textarea");
      if (textarea) {
        textarea.style.color = "red";
      }
}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <textarea id="textarea">
      This is a static template, there is no bundler or bundling involved!
    </textarea>


    <button onclick="changeTextareaColor()">change color</button>
    <script>
      
    </script>
  </body>
</html>

我稍微修改了您的代码。我希望它会起作用。

【讨论】：