18.重複除外
3129 ワード
再構築:コードの改善
包装し直しましょう
😋妙技
同じ単語を選択してすべて変更する場合は、その単語をドラッグし、ctrl+dを押して下に向かって単語を選択します.
触る「さわる」
🤔 : こんなボタンを1億個作ろうとしたら…?
(1億個のidを作成して一つ一つ修正する必要がある...)
😨
.
.
.
.
this
包装し直しましょう
😋妙技
同じ単語を選択してすべて変更する場合は、その単語をドラッグし、ctrl+dを押して下に向かって単語を選択します.
night,dayボタンも文章段落の下に作成したい...
触る「さわる」
🤔 : こんなボタンを1億個作ろうとしたら…?
(1億個のidを作成して一つ一つ修正する必要がある...)
😨
.
.
.
.
this <input type="button" value="night" onclick="
if (this.value == 'night'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
this.value = 'day';
} else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
this.value = 'night';
}
">
this
を使用しても問題ありません.document.querySelector('#night_day2')
は自分のことなので、this
を使えばいいです.ラベルのidも削除できます.
これにより、このコードを何度も繰り返し貼り付けても正常に動作します.
var
コードの良い方法は重複を解消することです!!
上記のコードにはdocument.querySelector('body')
が繰り返し表示されます.
varを使用して簡潔に作成しましょう. <input type="button" value="night" onclick="
var target = document.querySelector('body');
if (this.value == 'night'){
target.style.backgroundColor='black';
target.style.color='white';
this.value = 'day';
} else {
target.style.backgroundColor='white';
target.style.color='black';
this.value = 'night';
}
">
Reference
この問題について(18.重複除外), 我々は、より多くの情報をここで見つけました
https://velog.io/@iamjinseo/18.리팩토링-중복의-제거
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<input type="button" value="night" onclick="
if (this.value == 'night'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
this.value = 'day';
} else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
this.value = 'night';
}
">
コードの良い方法は重複を解消することです!!
上記のコードには
document.querySelector('body')
が繰り返し表示されます.varを使用して簡潔に作成しましょう.
<input type="button" value="night" onclick="
var target = document.querySelector('body');
if (this.value == 'night'){
target.style.backgroundColor='black';
target.style.color='white';
this.value = 'day';
} else {
target.style.backgroundColor='white';
target.style.color='black';
this.value = 'night';
}
">
Reference
この問題について(18.重複除外), 我々は、より多くの情報をここで見つけました https://velog.io/@iamjinseo/18.리팩토링-중복의-제거テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol