複数の入力フィールドに次のオブジェクトを設定するにはどうすればよいですか？

タイトルがあまり説明的でない場合は、私を許してください私はvibrant.jsを使って画像の色を取得しています。すべてが期待どおりに動作しています。これまでのことすべてに満足しています。入力テキストフィールドで値を取得する方法については、多分お勧め！複数の入力フィールドに次のオブジェクトを設定するにはどうすればよいですか？

<!DOCTYPE html> 
 
<html> 
 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 

 
    <script src="https://jariz.github.io/vibrant.js/dist/Vibrant.js"></script> 
 

 
    
 
</head> 
 
<body> 
 
    
 
    
 
How to get the console result in the input fields below? 
 
</br> 
 
<label>1st<label> 
 
<input value="" id="1"></br> 
 
<p></p> 
 
<label>2nd<label> 
 
<input value="" id="2"></br> 
 
<p></p> 
 
<label>3rd<label> 
 
<input value="" id="3"></br> 
 
<p></p> 
 
<label>4th<label> 
 
<input value="" id="4"></br> 
 
<p></p> 
 
<label>5th<label> 
 
<input value="" id="5"></br> 
 
    
 
    
 
     <div class="row examples"> 
 
      <div class="col-md-6"> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         <img data-src="examples/3.jpg"> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      
 
<script> 
 

 
var img = document.createElement('img'); 
 
img.setAttribute('src', 'examples/octocat.png') 
 

 
img.addEventListener('load', function() { 
 
    var vibrant = new Vibrant(img); 
 
    var swatches = vibrant.swatches() 
 
    for (var swatch in swatches) 
 
     if (swatches.hasOwnProperty(swatch) && swatches[swatch]) 
 
      console.log(swatch, swatches[swatch].getHex()) 
 

 
    /* 
 
    * Results into: 
 
    * Vibrant #7a4426 
 
    * Muted #7b9eae 
 
    * DarkVibrant #348945 
 
    * DarkMuted #141414 
 
    * LightVibrant #f3ccb4 
 
    */ 
 
}); 
 

 
</script> 
 
     
 
</body> 
 
</html>

私のコンソールは完全に

主な目的は、削除したBU（あなたは色の名前を削除することができ、入力テキストフィールドに色HEXを取得することです

* Vibrant #7a4426 
* Muted #7b9eae 
* DarkVibrant #348945 
* DarkMuted #141414 
* LightVibrant #f3ccb4

（スウォッチを返し、）

出典

2017-11-14 64YearOldCoder

私が作ったこの例を見てください。うまくいけば助けてくれます！

var url = 'https://images.unsplash.com/photo-1465188035480-cf3a60801ea5?dpr=1&auto=format&fit=crop&w=568&h=568&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D'; 
 
var img = document.createElement('img'); 
 
img.setAttribute('src', url + '&' + new Date().getTime()); 
 
img.setAttribute('crossOrigin', ''); 
 

 
img.addEventListener('load', function() { 
 
    var vibrant = new Vibrant(img); 
 
    var swatches = vibrant.swatches() 
 
    var i = 0; 
 
    for (var swatch in swatches) 
 
     if (swatches.hasOwnProperty(swatch) && swatches[swatch]) { 
 
      document.getElementById(""+(i+1)).value = swatches[swatch].getHex(); 
 
      i = i + 1; 
 
     } 
 
});

<script src="https://jariz.github.io/vibrant.js/dist/Vibrant.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <label>Vibrant</label> 
 
     <input value="" class="form-control" id="1"> 
 
     <label>Muted</label> 
 
     <input value="" class="form-control" id="2"> 
 
     <label>DarkVibrant</label> 
 
     <input value="" class="form-control" id="3"> 
 
     <label>DarkMuted</label> 
 
     <input value="" class="form-control" id="4"> 
 
     <label>LightVibrant</label> 
 
     <input value="" class="form-control" id="5"> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
      <img class="img-responsive" src="https://images.unsplash.com/photo-1465188035480-cf3a60801ea5?dpr=1&auto=format&fit=crop&w=568&h=568&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

また、あなたはここでそれを見つけることができます： https://jsfiddle.net/bgmpow5q/

出典

2017-11-14 13:22:46 kastriotcunaku

次のようなものを試すことができます

for (var i=0; i< swatches.length; i++) 
    if (swatches.hasOwnProperty(swatches[i]) && swatches[i]){ 
      document.getElementById(""+(i+1)).value = swatches[i].getHex(); 
      console.log(swatches[i], swatches[i].getHex()) 
     }

出典

2017-11-14 12:00:26 Omar

こんにちはオマールを、私を助けるために自分の時間を割いてどうもありがとうございました - あなたはにコードスニペットを使用してください可能性あなたのコードをテストする..私は成功しなかったあなたの方法に続き、ありがとう – 64YearOldCoder

何か問題がありますか？それは何ですか？ – Omar

こんにちは、私のコンソールは空であり、値は入力フィールドに入力されませんでした。 – 64YearOldCoder

入力ボックスをキャプチャする必要があるため、私はこのアプローチをとっています（あなたのループとは異なります）。

幸いなことに1,2,3,4,5;

ですので、私は索引付けを使用しています。 for-in構造ではこのインデックス・イン・イテレーションは困難です。

願っています。

for(i=1;i<=swatches.length;i++) { 
    if (swatches.hasOwnProperty(swatch) && swatches[swatch]) let hexValue = swatches[swatch].getHex(); 
    if (hexValue != undefined) { 
     document.getElementById(i).value = hexValue; 
    } 
}

出典

2017-11-14 12:04:31

こんにちはRajkumar、あなたの助けをありがとう、私は本当に感謝しますが、私はあなたのソリューションに運がなかった、あなたはそれを試してみていただけますか？多くの感謝 – 64YearOldCoder

私は活気がない;私はあなたの "スウォッチ"オブジェクトを与えることができる場合私は自分のコードをテストすることができます。 –

こんにちは、確かにここには：https://jariz.github.io/vibrant.js/dist/Vibrant.js – 64YearOldCoder

複数の入力フィールドに次のオブジェクトを設定するにはどうすればよいですか？

答えて

関連する問題