Question

在我的身体标签中，我有两种输入类型（文字和颜色）。它的工作原理如下，

如果在inputText，inputColor中给出颜色的十六进制值将自动更改为该颜色。
如果您通过colorPicker选择颜色，则inputText会自动更改为您选择的colorHex值。

代码下方

<body>

<input type="text" id="txtColor">
<input type="color" id="colColor" >
<script>

document.getElementById("txtColor").onblur = function() {myFunction1()};
document.getElementById("colColor").onchange = function() {myFunction2()};

function myFunction1() {
    //alert("Input field lost focus.");
    var txtColor = document.getElementById("txtColor").value;
	
    document.getElementById("txtColor").nextElementSibling.value = txtColor;
   
//    document.getElementById("colColor").value = txtColor;
}

function myFunction2() {
    //alert("Input field lost focus.");
    var colColor = document.getElementById("colColor").value;
    document.getElementById("colColor").previousElementSibling.value = colColor;
    
    //document.getElementById("txtColor").value = colColor;
}


</script>

</body>

我想要做的是，我有一个包含多行上面对的表（inputText＆amp; inputColor）。它应该与上面的功能类似。我正在尝试使用getElementsByClassName，它具有inputText和inputColor的公共类名，因此它将使用hexColor值或颜色更新兄弟。

这是我目前的代码，它不起作用。目前收到错误“Uncaught TypeError：txtColorClass.addEventListener不是函数”

<body>

<table>
    <tr>
        <td>
            <input type="text" id="txtColor0" class="txtColorClass">
            <input type="color" id="colColor0" >            
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" id="txtColor1" class="txtColorClass">
            <input type="color" id="colColor1" >            
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" id="txtColor2" class="txtColorClass">
            <input type="color" id="colColor2" >            
        </td>
    </tr>    
</table>

<script>

var txtColorClass = document.getElementsByClassName("txtColorClass");
txtColorClass.addEventListener("blur", function( event ) {
  //event.target.style.background = "pink";    
  var txtColor = event.target.value;	
  event.target.nextElementSibling.value = txtColor;
  
}, true);


//document.getElementById("txtColor").onblur = function() {myFunction1()};
document.getElementById("colColor").onchange = function() {myFunction2()};

function myFunction1() {
    //alert("Input field lost focus.");
    var txtColor = document.getElementById("txtColor").value;
	
    document.getElementById("txtColor").nextElementSibling.value = txtColor;
   
//    document.getElementById("colColor").value = txtColor;
}

function myFunction2() {
    //alert("Input field lost focus.");
    var colColor = document.getElementById("colColor").value;
    document.getElementById("colColor").previousElementSibling.value = colColor;
    
    //document.getElementById("txtColor").value = colColor;
}


</script>

</body>

Answer 1

检查以下代码段

有很多可能的方法可以做到这一点。以下是可能的方法之一。而且您也可以使用jquery轻松完成此操作。

var txtColorClass = document.getElementsByClassName("txtColorClass");

for(var i = 0; i < txtColorClass.length; i++)
{
   txtColorClass.item(i).addEventListener("blur", function( event ) {
  //event.target.style.background = "pink";    
  var txtColor = event.target.value;	
  event.target.nextElementSibling.value = txtColor;
  
}, true);

}


var colColorClass = document.getElementsByClassName("colColor");


function myFunction1() {
    //alert("Input field lost focus.");
    var txtColor = document.getElementById("txtColor").value;
	
    document.getElementById("txtColor").nextElementSibling.value = txtColor;
   
//    document.getElementById("colColor").value = txtColor;
}

function myFunction2(colColorBox) {
    //alert("Input field lost focus.");
    var colColor = colColorBox.value;
    colColorBox.previousElementSibling.value = colColor;
    
    //document.getElementById("txtColor").value = colColor;
}

<body>

<table>
    <tr>
        <td>
            <input type="text" id="txtColor0" class="txtColorClass">
            <input type="color" id="colColor0" class="colColor" onchange="myFunction2(this)">            
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" id="txtColor1" class="txtColorClass">
            <input type="color" id="colColor1" class="colColor" onchange="myFunction2(this)">            
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" id="txtColor2" class="txtColorClass">
            <input type="color" id="colColor2" class="colColor" onchange="myFunction2(this)">            
        </td>
    </tr>    
</table>

</body>

Answer 2

非常感谢NewToJS，你的提示让我能够解决这个问题。

<body>

<table>
    <tr>
        <td>
            <input type="text" id="txtColor0" class="txtColorClass">
            <input type="color" id="colColor0" class="colColorClass">
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" id="txtColor1" class="txtColorClass">
            <input type="color" id="colColor1" class="colColorClass">
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" id="txtColor2" class="txtColorClass">
            <input type="color" id="colColor2" class="colColorClass">
        </td>
    </tr>    
</table>

<script>

var txtColorClass = document.getElementsByClassName("txtColorClass");
var colColorClass = document.getElementsByClassName("colColorClass");

for(let i = 0; i < txtColorClass.length; i++) {
    txtColorClass[i].addEventListener("blur", function() {
        var txtColor = event.target.value;	
        event.target.nextElementSibling.value = txtColor;
  })
}

for(let i = 0; i < colColorClass.length; i++) {
    colColorClass[i].addEventListener("change", function() {
        var colColor = event.target.value;	
        event.target.previousElementSibling.value = colColor;
  })
}

</script>

</body>

多输入类型的Javascript常用函数= text＆amp;输入类型=颜色

2 个答案: