![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
javascript 初心者なのですが、質問させてください。
クリックした画像を3.jpgに書き換えるというコードを書いたのですが、うまく動きません。
どこが違間違っているのでしょうか。
/-------------------------------------------------------------/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>神経衰弱</title>
<style type="text/css">
ul {
width: 300px;
list-style:none;
margin: 0;
padding: 0;
}
li {
float:left;
margin: 0;
padding; 0:
}
img {
vertical-align: bottom;
}
#all {
width: 300px;
margin: 0px auto 0px;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="all">
<ul>
<li><img src="none.jpg" alt="3" width="100px" height="100px" id="c_1" onclick="conce(c_1)" /></li>
<li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_2" onclick="conce(c_2)" /></li>
<li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_3" onclick="conce(c_3)" /></li>
<li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_4" onclick="conce(c_4)" /></li>
<li><img src="none_2.jpg" alt="" width="100px" height="100px" id="c_5"/></li>
<li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_6" onclick="conce(c_5)" /></li>
<li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_7" onclick="conce(c_6)" /></li>
<li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_8" onclick="conce(c_7)" /></li>
<li><img src="none.jpg" alt="3" width="100px" height="100px" id="c_9" onclick="conce(c_8)" /></li>
</ul>
</div>
<script type="text/javascript">
function conce(aaa){
document.getElementById("aaa").src = "3.jpg";
}
</script>
</body>
</html>
/-----------------------------------------------------------------------/
よろしくお願いします。
No.2ベストアンサー
- 回答日時:
引用符が付け間違えしています
誤: <img src="none.jpg" id="c_1" onclick="conce(c_1)" />
正: <img src="none.jpg" id="c_1" onclick="conce('c_1')" />
誤: document.getElementById("aaa").src = "3.jpg";
正: document.getElementById(aaa).src = "3.jpg";
本質ではありませんが、一緒にこれも直しましょう
誤: <img width="100px" height="100px"
正: <img width="100" height="100"
お返事ありがとう御座います。
なるほど、引用符を間違えていたのですね。
関数の引数とidを同じにするとまずいのかなと少し考えていたのですが、このやりかたでも動くようで安心しました。
htmlの間違いも指摘いただきありがとう御座います。
ピクセル指定の場合、単位は要らないのですね。
勉強になりました。
ありがとう御座いました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript 画像の表示位置 3 2022/12/23 08:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
[jQuery]bxSlider 一番最後と...
-
前回の質問の続き
-
MAX関数を使ってからLEFT JOIN...
-
jspでcssが読み込めない
-
1枚の画像をクリックすると複数...
-
フッター上部に謎の隙間
-
iframe内のリンクが飛ばないの...
-
MFCで画像を表示させているので...
-
表示・非表示のスクリプトで、...
-
getElementByIdの戻り値がnull...
-
appendChildでのデフォルト値
-
【javascript】ロールオーバー...
-
iframe内のリンク文字のマウス...
-
jQueryでのドラッグアンドドロ...
-
bxsliderで最初に縦に複数表示...
-
指定したフォルダの画像を一括...
-
JavaScript で flexslider の画...
-
「画像クリックで音声再生」を ...
-
画像の重なりの順序を代える方...
-
複数bxsliderをタブで切り替え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
同一ページ内の複数のタグに同...
-
【jQuery】2分割レイアウトで、...
-
キャラクターがぴょこんと飛び...
-
画像をフェードアウト&フェー...
-
jqueryのプラグインslickの画像...
-
html5に変えるとスライドショー...
-
Javaスクリプトで画像を縦にス...
-
high slideをFC2ブログで
-
ご教授ください。
-
jQueryでタブ、スライダーを使...
-
チェックボックスと画像切替の連動
-
jQueryのclickイベントハンドラ
-
javascriptで文字サイズの変更
-
fontsize.jsでhtmlの大中小の設...
-
【iOS及びAndroid】リンク画像...
-
Firefoxとクロームでフェードイ...
-
javascript src書き換え
-
神経衰弱 順番に裏返し
-
アコーディオンメニューが開い...
おすすめ情報