人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

以下のHTMLを対象に、javascriptでgetelementbyidをつかって
"expand", "shrink"をとりたいのですがnullになってしまいます。
どこがおかしいかわかるかたがいましたら教えてください。
よろしくお願いします!

<body>
<div id="container">
<div id="main">
<canvas id="myCanvas" width="300" height="400">
</canvas>
<canvas id="myCanvas2" width="300" height="400">
</canvas>
</div>
<p id="message"></p>
<div id="sub">
<h3><a href="#">見出し#1</a></h3>
<div id="acc1">
<!-- <p> -->
<form>
<input type="button" value="拡大" id='expand' onClick="zoomIn()">
<input type="button" value="縮小" id='shrink' onClick="zoomOut()">
<input type="button" value="決定" id='decide' onClick="save_img()">
</form>
<!-- </p> -->
</div>
<h3><a href="#">見出し#2</a></h3>
<div id="acc2">
<p>
test
</p>
</div>
<h3><a href="#">見出し#3</a></h3>
<div id="acc3">
<p>
test
</p>
</div>
<h3><a href="#">見出し#4</a></h3>
<div id="acc4">
<p>
test
</p>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#sub').accordion({
autoHeight : false
});
});
</script>
</div>
</body>


●質問者: yuma_nishizaki
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●100ポイント ベストアンサー

問題ありませんでした。
なぜgetElementByIdが入ったコードを乗せないのでしょうか。

onloadが終わる前に実行していたのかな?
http://jsfiddle.net/cherenkov/c8vYD/

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
window.onload = function() {
 alert(document.getElementById('expand').value);
 alert(document.getElementById('shrink').value);
};
</script>
</head>
<body>
<div id="container">
<div id="main">
<canvas id="myCanvas" width="300" height="400">
</canvas>
<canvas id="myCanvas2" width="300" height="400">
</canvas>
</div>
<p id="message"></p>
<div id="sub">
<h3><a href="#">見出し#1</a></h3>
<div id="acc1">
<!-- <p> -->
<form>
<input type="button" value="拡大" id='expand' onClick="zoomIn()">
<input type="button" value="縮小" id='shrink' onClick="zoomOut()">
<input type="button" value="決定" id='decide' onClick="save_img()">
</form>
<!-- </p> -->
</div>
<h3><a href="#">見出し#2</a></h3>
<div id="acc2">
<p>
test
</p>
</div>
<h3><a href="#">見出し#3</a></h3>
<div id="acc3">
<p>
test
</p>
</div>
<h3><a href="#">見出し#4</a></h3>
<div id="acc4">
<p>
test
</p>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#sub').accordion({
autoHeight : false
});
});
</script>
</div>
</body>
</html>

yuma_nishizakiさんのコメント
回答ありがとうございます! テストして頂いて本当に申し訳ないのですが、実はDOMと関係ないところが原因になっていました。 getelementbyidする前に別のエレメントで上書きしてしまっていただけというおそまつなミスに今気付きました。 ありがとうございました!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ