为什么我的按钮颜色没有按命令改变？答案

【问题标题】：Why is my button color not changing on command?为什么我的按钮颜色没有按命令改变？
【发布时间】：2020-09-11 14:37:55
【问题描述】：

我“制作”了这个脚本：

<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”更改为所选择的颜色。但是，它不起作用。我认为即使是 console.log 也不起作用。

这是模板：

<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中。

【问题讨论】：

标签： javascript html css vue.js

【解决方案1】：

如果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>

【讨论】：

【解决方案2】：

我看到您在代码中使用了 vue.js。该解决方案利用two-way binding with 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>

Open this codepen for demonstration

编辑：有关反应式样式的更多信息here

【讨论】：