ご挨拶仲間Stackoverflowers。 JavaScriptを使用してボタンを1回クリックするだけで、テキスト、イメージ、および色が変化するようにしようとしています。これを行う効率的な方法はありますか？ここにはMy example Websiteがあります。私はEdward Snowdenの画像、説明、リストの変更を1つのボタンで行い、再びクリックするとオリジナルに戻そうとしています！助けてくれてありがとう！JavaScriptでページ要素を変更するDOM
実際これを行うのはむしろ簡単です。
<!DOCTYPE html>
<html>
<body>
<img id="image" src="image1.gif">
<p id="text">Old text</p>
<button onclick="change()">Click Me</button>
<script>
function change() {
document.getElementById("image").src = "image2.jpg";
document.getElementById("text").innerHTML = "new text";
}
</script>
</body>
</html>
IDを持つ要素を宣言し、onclickイベントのボタンを作成します。ボタンをクリックすると、change()関数が実行され、imageのsrc〜image2.jpgとtextのテキストがnew textに変更されます。
あなたはそれが戻って変更したい場合は、あなたがこのような何かを試みることができる：
<!DOCTYPE html>
<html>
<body>
<img id="image" src="image1.gif">
<p id="text">Old text</p>
<button onclick="change()">Click Me</button>
<script>
var element1;
var element2;
function change() {
element1 = document.getElementById("image")
element2 = document.getElementById("text")
if (element1.src == "image2.jpg") {
element1.src = "image1.gif"
element2.innerHTML = "Old text"
} else {
element1.src = "image2.jpg"
element2.innerHTML = "new text"
}
}
</script>
</body>
</html>
ありがとうございました！しかし、ボタンをもう一度クリックして元のコンテンツに戻すにはどうすればいいですか？ – Marvinhozi
@Marvinhozi新しい編集をご覧ください。 – keeganjk
This method is for Jquery.
$(document).on('click', '.btn-color1', function(){
$(this).addClass('btn-color2');
$('.container').addClass('changecolor2');
});
$(document).on('click', '.btn-color2', function(){
$(this).removeClass('btn-color1');
$('.container').removeClass('changecolor2');
$('.container').addClass('changecolor3');
});
<style>
.btn-color1{
color: #fff;
background-color: red;
padding: 10px;
}
.btn-color2{
color: #fff;
background-color: blue;
padding: 10px;
}
.changecolor2{
background-color: blue;
}
</style>
を使用すると、マウスクリックに反応して、要素を変更する方法を知っていますか？これは非常に広い質問であるため、あなたが求めていることをより具体的にする必要があります。 – Carcigenicate
ウェブページにJavascriptを使用するためのチュートリアルがたくさんあります。 SOは船を学ぶ代わりではありません。 – Barmar