JavaScriptは動作しません

このHTMLは、ボタンを押してサイト背景を色に変え、画像を押して背景画像を変更します。しかし、私は背景画像を変える画像の代わりにテキストリンクを作る方法を知らない。JavaScriptは動作しません

<!DOCTYPE HTML> 
 

 
<html> 
 

 
<head> 
 
    <title>Untitled</title> 
 
    <style type="text/css"> 
 
body{ 
 
    background: no-repeat; 
 
} 
 

 
    </style> 
 
    <meta charset="utf-8"> 
 
    <script> 
 
    function change_color(obj) 
 
    { 
 
     obj.value && (document.body.style.backgroundColor = obj.value); 
 
     obj.src && (document.body.style.backgroundImage = 'url('+obj.src+')'); 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
<form method="post" action="1.php" onsubmit="return false"> 
 
\t <button class="color" id="red" name="button" value="red" onclick='change_color(this)'>red</button> 
 
\t <button class="color" id="orange" name="button" value="orange" onclick='change_color(this)'>orange</button> 
 
    <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" onclick='change_color(this)'> 
 
    <img src="http://javascript.ru/forum/images/smilies/victory.gif" alt="" onclick='change_color(this)'> 
 
</form> 
 

 
</body> 
 

 
</html>

出典

2017-09-22 Kara Fight

あなたは 'テキストlink'によって何を意味するのですか？ – mrid

HTMLでリンクする方法を尋ねていますか？あなたはそれを正確に見たときに何を見つけましたか？ – David

''を 'ここに変更してください –

カスタム属性data-srcとしてsrcを保存し、ユーザーがリンクをクリックしたときにナビゲーションを避けるためにhref="#"を設定することができます。あなたはjQueryのをタグ付けするので

obj.attributes["data-src"] && (document.body.style.backgroundImage = 'url(' + obj.attributes["data-src"].value + ')');

<!DOCTYPE HTML> 
 

 
<html> 
 

 
<head> 
 
    <title>Untitled</title> 
 
    <style type="text/css"> 
 
    body { 
 
     background: no-repeat; 
 
    } 
 
    </style> 
 
    <meta charset="utf-8"> 
 
    <script> 
 
    function change_color(obj) { 
 
     obj.value && (document.body.style.backgroundColor = obj.value); 
 
     obj.src && (document.body.style.backgroundImage = 'url(' + obj.src + ')'); 
 
     
 
     obj.attributes["data-src"] && (document.body.style.backgroundImage = 'url(' + obj.attributes["data-src"].value + ')'); 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <form method="post" action="1.php" onsubmit="return false"> 
 
    <button class="color" id="red" name="button" value="red" onclick='change_color(this)'>red</button> 
 
    <button class="color" id="orange" name="button" value="orange" onclick='change_color(this)'>orange</button> 
 
    <a href="#" data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" onclick="change_color(this)">Logo</a> 
 
    <a href="#" data-src="http://javascript.ru/forum/images/smilies/victory.gif" onclick="change_color(this)">Smiley</a> 
 
    <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" onclick='change_color(this)'> 
 
    <img src="http://javascript.ru/forum/images/smilies/victory.gif" alt="" onclick='change_color(this)'> 
 
    </form> 
 

 
</body> 
 

 
</html>

出典

2017-09-22 12:46:28 Nisarg

あなたは、テキストベースのハイパーリンクを意味しますか？例えば

<a href="#_" onclick="change_color(this)">Change Color</a>

出典

2017-09-22 12:41:56 scunliffe

イベントハンドラが 'src'または' value'プロパティを取得しようとしているので、それだけでは不十分だとは思っていません。それらのどれも 'a'で設定されていないので、動作しません。 – Nisarg

ああ、私は、機能自体に依存性があることに気づいていませんでした。 @mridの答えはもっと意味をなさないでしょう。 – scunliffe

：

<a href="#" data-src="http://javascript.ru/forum/images/smilies/victory.gif" onclick="change_color(this)">Smiley</a>

次に、画像の場所を取得し、DOMにそれを更新するためにあなたのクリックハンドラに次のように追加することができますここでは、コードのjQueryに相当する質問があります：

の

<a href="#_" class="change-color" data-color="red">Change Color</a>

JS：

$('.change-color').click(function(){ 
    $(document).css({'background': $(this).data('color')}); 
});

出典

2017-09-22 12:50:10 mrid

@ freedomn-m私の回答を更新 – mrid

素晴らしい見解、私は答えを更新します – mrid

はあなたに多くのneater（ie jquery ...）の答えを+1しました –

答えて

関連する問題