当文本区域中存在文本时更改(样式)表单提交按钮 - Jade/Pug [英] Changing the (styling of) the form submit button when text is present in the textarea - Jade / Pug

问题描述

这是在 Node/Express 中渲染表单 mixin 的代码(使用 Jade/Pug 作为模板引擎)

This is code to render a form mixin in Node/Express (using Jade/Pug as the template engine)

我的目标是在 textarea 中没有文本时禁用按钮，并在有文本时启用按钮.除了没有应用 css 类(用于视觉样式)之外，它可以工作.

My goal is to disable the button when there is no text in the textarea and enable the button when there is text persent. It works except the css classes (for visual styling) aren't getting applied.

我最好的猜测是我正在更改内存中对象的类 (var btn)，而不是 DOM 中的实际对象.

My best guess is that I am changing the class of an object in memory (var btn) and not on the actual object in the DOM.

我不知道该怎么做.请问有人可以帮忙吗?

I can't work out how to do that. Can anyone help please?

mixin myForm()

  form(action="/tweet/add" method="POST" class="formclassname")

    textarea(
      name='text' 
      id='textarea' 
      maxlength="300" 
      placeholder='What\'s happening?'
    )

    input(
      type="submit" 
      id="button" 
      value="Send It" 
      class="button"
      disabled = true
    )

 script.

    var btn = document.getElementById('button');
    var inpt = document.getElementById('textarea');

    inpt.addEventListener("input", function(){
      if (this.value != '') {
        btn.disabled = false;
        btn.class = 'butOn';
        console.log('button enabled');
      } 
      else {
          btn.class = 'butOn';
          console.log('button disabled');
      }
})

CSS

.button{
  /* Style Font */
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  color: rgb(255, 255, 255);

  /* Style "button" */
  background-color: rgba(0, 166, 255);
  border-radius: 25px;
  border: 2px solid rgb(0, 166, 255, 0.6);
  /* Position the button */
  padding: 10px 20px 10px 20px;
  margin: 5px 10px 5px 10px;
 }

.butOn {
  background-color: #1dec0a;
}

.butOff {
  background-color: rgb(147, 208, 249);
}

推荐答案

典型！我花了 30 分钟输入问题，然后在 5 秒后找到答案.

Typical! I spend 30 minutes typing the question then find an answer 5 seconds later.

留下这个来帮助别人.

如何使用 JavaScript 更改元素的类?

TLDR... classList.remove 和 .add 如下

TLDR... classList.remove and .add as follows

   script.
      var btn = document.getElementById('button');
      var inpt = document.getElementById('textarea');
      inpt.addEventListener("input", function(){
        if (this.value != '') {
          btn.disabled = false;
          btn.classList.remove('butOff');
          console.log(btn);
        } 
        else {
          btn.classList.add('butOff');
          btn.disabled = true;
          console.log('no text present');
        }
      })

这篇关于当文本区域中存在文本时更改(样式)表单提交按钮 - Jade/Pug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！