Question

我“制作”了这个脚本：

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

Answer 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>

Answer 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的信息

为什么我的按钮颜色未按命令更改？

2 个答案: