JavaScriptを使用して、最近変更された背景色を持つHTML要素を見つける方法
コードのこの部分についてどのように対処すればよいかアドバイスが欲しいのですが:
私のコードでは、さまざまな div の背景色をランダムに変更しました。div に含まれるのは文字だけです (機能しています)。 次に、ユーザーがクリックした場合などを監視できる OS でどの div が変更されたかを返したいと考えています。
どの要素が「選択」されているかを確認するにはどうすればよいですか?
これまでのコード:
function generatePattern() {
let key = document.getElementsByClassName("keyboard-letter");
let number = document.getElementsByClassName("keyboard-number");
console.log(key);
for (let i = 0; i < key.length; i++) {
let boolean = Math.random() >= 0.75;
if (boolean == true) {
key[i].style.backgroundColor = "white";
key[i].style.color = "black";
} else if (boolean == false) {
key[i].style.backgroundColor = "black";
key[i].style.color = "white";
};
}
}
(数値変数を無視します)
クエリ セレクターを試してみましたが、構文のレイアウト方法の具体的な例は見つかりませんでした。
なぜ単に配列に格納しないのですか?また、クラスの追加と削除もはるかに簡単になります。
– エパスカレロ2020 年 9 月 3 日 2:43
クラスを追加および削除しようとしましたが、すでにクラスが存在するため、すでにクラスがある場合にクラスを追加する方法がわかりません。
– エリオット・カレン2020 年 9 月 3 日 2:46
developer.mozilla.org/en-US/docs/Web/API/Element/classList
– エパスカレロ2020 年 9 月 3 日 2:47
------------------------
ユーザーがクリックしたかどうかなどを監視できる OS
ユーザーが要素をクリックしたタイミングを知る必要がある場合は、次のようなイベント リスナーを使用します。
document.getElementsByClassName("keyboard-letter").addEventListener("click", function() {
/*Do Whatever you need to do when the user clicks the element*/
})
document.getElementsByClassName("keyboard-number").addEventListener("click", function() {
/*Do Whatever you need to do when the user clicks the element*/
})
1
document.getElementsByClassName("keyboard-number") は、addEventListener を呼び出す要素を返しません。HTML コレクションを反復処理するつもりでしたか?
– トラクター2020 年 9 月 3 日 3:06
------------------------
要素を配列にプッシュします
function generatePattern() {
let key = document.getElementsByClassName("keyboard-letter");
let number = document.getElementsByClassName("keyboard-number");
var activeElems = []
for (let i = 0; i < key.length; i++) {
let boolean = Math.random() >= 0.75;
var elem = key[i];
if (boolean == true) {
elem.style.backgroundColor = "white";
elem.style.color = "black";
activeElems.push(elem);
} else {
elem.style.backgroundColor = "black";
elem.style.color = "white";
};
}
console.log(activeElems);
}
クラスを切り替えるだけで、コードを大幅にすっきりさせることができます。
function generatePattern() {
const keys = document.querySelectorAll(".keyboard-letter");
const activeElems = []
keys.forEach(function (elem) {
const isActive = Math.random() >= 0.75;
elem.classList.toggle('active', isActive);
if (isActive) activeElems.push(elem);
});
console.log(activeElems);
}
generatePattern()div.wrapper {
display: grid;
grid-template-columns: repeat(5, 40px);
grid-gap: 0px;
}
div.keyboard-letter {
line-height: 40px;
font-size: 20px;
text-align: center;
width: 40px;
height: 40px;
border: 1px solid #C0C0C0;
color: white;
background: black;
}
div.keyboard-letter.active {
color: black;
background: white;
}<div class="wrapper">
<div class="keyboard-letter">1</div>
<div class="keyboard-letter">2</div>
<div class="keyboard-letter">3</div>
<div class="keyboard-letter">4</div>
<div class="keyboard-letter">5</div>
<div class="keyboard-letter">6</div>
<div class="keyboard-letter">7</div>
<div class="keyboard-letter">8</div>
<div class="keyboard-letter">9</div>
<div class="keyboard-letter">10</div>
<div class="keyboard-letter">11</div>
<div class="keyboard-letter">12</div>
<div class="keyboard-letter">13</div>
<div class="keyboard-letter">14</div>
<div class="keyboard-letter">15</div>
<div class="keyboard-letter">16</div>
<div class="keyboard-letter">17</div>
<div class="keyboard-letter">18</div>
<div class="keyboard-letter">19</div>
<div class="keyboard-letter">20</div>
</div>------------------------
まず、コンテナに突然変異オブザーバーを追加し、setAttribute を使用してスタイルを変更するためにコードを少し変更する必要があります
// call this function onload
function startOb(params) {
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
// target container to watch
const list = document.querySelector(`#container`);
// options
const config = {
attributes: true,
childList: true,
characterData: true,
subtree: true,
};
// instance
const observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.type === "attributes") {
console.log("mutation =", mutation);
console.log(`The \`${mutation.attributeName}\` attribute was modified.`);
// console.log("list style =", list.style);
}
});
});
observer.observe(list, config);
}
function generatePattern() {
let key = document.getElementsByClassName("keyboard-letter");
let number = document.getElementsByClassName("keyboard-number");
console.log(key);
for (let i = 0; i < key.length; i++) {
let boolean = Math.random() >= 0.75;
if (boolean == true) {
key[i].setAttribute(`style`, `backgroundColor: white; color: black`);
} else if (boolean == false) {
key[i].setAttribute(`style`, `backgroundColor: black; color: white`);
};
}
}
------------------------
説明: active は、背景を黒、色を白に変更する CSS クラスです。ここで、ボタンを使用して、どのように変化が起こっているかを確認できるようにしました。ボタンをクリックするたびに、.keyboard-letter 要素ごとに forEach ループが実行されます。チェックが false の場合、アクティブなクラスが追加されます。したがって、それがすでに存在するかどうかを確認します。それがすでに存在する場合は何も起こりませんが、存在しない場合はアクティブ クラスが追加され、その要素が配列 activeElems にプッシュされます。チェックが true の場合に何が起こるかは理解できます。
ボタンをクリックして、CSS を変更した要素を見つけます:
var activeElems;
var firstRun = true;
function generatePattern() {
activeElems = [];
const keys = document.querySelectorAll(".keyboard-letter");
keys.forEach(function(elem) {
const check = Math.random() >= 0.75;
if (!check) {
if (!elem.classList.contains("active")) {
elem.classList.add("active");
activeElems.push(elem);
}
} else {
if (elem.classList.contains("active")) {
elem.classList.remove("active");
activeElems.push(elem);
}
}
});
if(firstRun == true) firstRun = false;
else{
console.log(activeElems);
console.log(activeElems.length);
}
}
generatePattern();* {
box-sizing: border-box;
}
div.wrapper {
display: flex;
width: 200px;
margin-bottom: 20px;
flex-wrap: wrap;
}
div.keyboard-letter {
width: 40px;
text-align: center;
line-height: 40px;
border: 1px solid #000;
}
.active {
color: #fff;
background: #000;
}<div class="wrapper">
<div class="keyboard-letter">1</div>
<div class="keyboard-letter">2</div>
<div class="keyboard-letter">3</div>
<div class="keyboard-letter">4</div>
<div class="keyboard-letter">5</div>
<div class="keyboard-letter">6</div>
<div class="keyboard-letter">7</div>
<div class="keyboard-letter">8</div>
<div class="keyboard-letter">9</div>
<div class="keyboard-letter">10</div>
<div class="keyboard-letter">11</div>
<div class="keyboard-letter">12</div>
<div class="keyboard-letter">13</div>
<div class="keyboard-letter">14</div>
<div class="keyboard-letter">15</div>
<div class="keyboard-letter">16</div>
<div class="keyboard-letter">17</div>
<div class="keyboard-letter">18</div>
<div class="keyboard-letter">19</div>
<div class="keyboard-letter">20</div>
<button onClick="generatePattern()">Button</button>
</div>新着記事:
Jenkins で Selenium を実行しようとすると問題が発生するSpring データを使用した Postgres SQL の競合状態 JpaRepositoryJavaScript - コールバック関数の終了後にコードを実行するネイティブに反応 - デトックス テスト、コマンドの実行時に iOS シミュレーター アプリが起動しない #2305sybase でこの SQL クエリを記述するより良い方法はありますか?kotlin - Swift でのコルーチン フローの使用Reactjs - コンポーネント React ネイティブから下部タブのナビゲーター データを動的に変更するhtml - 異なる画面解像度で常にページの下部にフッターを表示する方法c - なぜ型キャストされたポインタを逆参照するのでしょうか?sql - MySQL が一意のペアを選択するPython - トピックが追加されていませんPython - %u 文字列で整数を返す方法は?