Блог

Я «создал» этот скрипт:

 <script>
export default {
    name: "Form"
}

var backRGB = document.getElementById("color").value;
document.getElementById("color").onchange = function() {
  backRGB = this.value;
  console.log(backRGB);
  document.getElementById("orgButton").color = backRGB;
}
</script>
  

Предположительно, он проверяет, изменился ли палитра цветов с ‘color’, и если это так, он изменяет кнопку ‘orgButon’ на выбранный цвет. Однако это не работает. Я думаю, что даже консоль.журнал не работает.

Вот шаблон:

 <template>
    <div>
        <div class="formulario">
            <h1>Criar Organização</h1>
            <form>
                <div><input class="long" type="text" name="orgName" id="orgName" placeholder="Nome" minlength="5" maxlength="20"></div>
                <div>
                    <input class="short" type="text" name="orgAbb" id="orgAbb" placeholder="Abreviatura" minlength="3" maxlength="4">
                    <input type="color" id="color" value="#f6b73c">
                </div>
                <input class="button" type="button" id="orgButton" value="Criar">
            </form>
        </div>
    </div>
</template>
  

Приведенный выше код выполнен в формате Form.vue.

Если JS находится над HTML, произойдет сбой, потому что document.getElementById("color") еще не существует, поэтому он не может установить свой обработчик событий onchange.

Следующий код сработал для меня:

     <div>
    <div class="formulario">
        <h1>Criar Organização</h1>
        <form>
            <div><input class="long" type="text" name="orgName" id="orgName" placeholder="Nome" minlength="5" maxlength="20"></div>
            <div>
                <input class="short" type="text" name="orgAbb" id="orgAbb" placeholder="Abreviatura" minlength="3" maxlength="4">
                <input type="color" id="color" value="#f6b73c">
            </div>
            <input class="button" type="button" id="orgButton" value="Criar">
        </form>
    </div>
</div>


<script>
var backRGB = document.getElementById("color").value;

document.getElementById("color").onchange = function() {
    backRGB = this.value;
    console.log(backRGB);
    document.getElementById("orgButton").style.backgroundColor = backRGB;
}
</script>
  

Я вижу, что вы используете vue.js в вашем коде. Это решение использует двустороннюю привязку с v-model

 <template>
  <div id="app">
    <input type="color" v-model="color">
    <p>{{ color }}</p>
    <button :style="{color}">BUTTON</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      color: ""
    };
  },
};
</script>
  

Откройте этот codepen для демонстрации

РЕДАКТИРОВАТЬ: больше информации о реактивных стилях здесь