javascriptの操作

質問

二つのチェックボックスがあって、二つにチェックが入ると
「次へ」ボタンの色が変わり押下できる状態にしたいのですが、なかなかうまくいきません。下記ソースだと、二つチェックが入ったらきちんと{ }の中が呼ばれるのですが、急に画面が真っ白になります。
{ }の中をdocument.write("hoge");などにすると画面が切り替わり
hogeとしか出ません。

どうしたらいいでしょうか？？

<!--
function result(){
if(document.getElementById("01").checked == true &&　document.getElementById("02").checked == true){
var url = "index_02.html";
document.write("<a href=url>");
}
}
-->
<img src="images/bt_next.gif" name="Image1"/></a>

回答No.4

fujillin

ソースファイルのロードが終わってから、document.writeすると、新たに書き直しになりますから、それまでの表示内容は消えて、それ以後に記した内容だけが表示されます。
それなので、

＞急に画面が真っ白になります。
＞画面が切り替わりhogeとしか出ません。
というのは、スクリプトで指定している通りの結果です。

＞「次へ」ボタンの色が変わり押下できる状態にしたいのですが
<button>タグでdisabled属性を指定しておけば、ボタンが無効化されますので、その機能を利用するのが一番自然ではないでしょうか？

なお、要素のidはNo2様の御指摘のように英文字で始めることをお勧めします。（以下の例ではそのままにしてありますが）

<script type="text/javascript">
function result() {
if (document.getElementById('01').checked &&　document.getElementById('02').checked) {
var e = document.getElementById('btn');
e.disabled = false; e.style.backgroundColor = 'yellow';
}}
</script>

<button type="button" id="btn" onclick="location.href='index_02.html'" disabled>次へ</button>

お礼

＞ソースファイルのロードが終わってから、document.writeすると、新たに書き直しになりますから、それまでの表示内容は消えて、それ以後に記した内容だけが表示されます。
それなので、

document.writeはそのような動きをするんですね。ということは、私が作ったソースは正しい動きだったんですね。

＞<button>タグでdisabled属性を指定しておけば、ボタンが無効化されますので、その機能を利用するのが一番自然ではないでしょうか？

disable属性。知らなかったです・・確かにこちらを使った方が自然ですね！！

ご教授ありがとうございました。おかげさまで希望とおりの動きを作ることができました。

回答No.3

yambejp

>ボタンの色が変わり

の意味がよくわかりませんが、こんなかんじでどうでしょう？
<script>
function result(obj){
var flg=false;
if(document.getElementById("c01").checked == true &&　document.getElementById("c02").checked == true){
flg=true;
}
return flg;
}
function check(){
document.getElementById("a01").className=(document.getElementById("c01").checked == true &&　document.getElementById("c02").checked == true)?"link":"none";
}
</script>
<style>
a#a01.none img{border:none;}
</style>
<input type="checkbox" id="c01" onclick="check()">
<input type="checkbox" id="c02" onclick="check()">
<a href="index_02.html" id="a01" onclick="return result(this)" class="none"><img src="images/bt_next.gif" name="Image1"/></a>

お礼

すいません
document.getElementById("a01").className=(document.getElementById("c01").checked == true &&　document.getElementById("c02").checked == true)?"link":"none";
の?の部分が分からなかったです。

今回は二つクリックされたら画像Ａがdisplay=inlineに、
クリックされていなかったら画像Bがdisplay=inlineという風に作ってみました。

ご教授ありがとうございました！！

回答No.2

babu_baboo

ていせい！
ちょっとあんいだった。
idはすうじをつかえるけど、あるふぁべっとからはじめなきゃ～ね

お礼

ありがとうございます・・・
確かにIDには数字だけはいけませんよね。。
基本を忘れていました！！

回答No.1

babu_baboo

<a id="abc" href="#" style="display:none;"><img src="images/bt_next.gif" name="Image1"/></a>

function result(){

　var u = 'index_02.html';
　var d = document;
　var e = d.getElementById('abc');
　var c0 = d.getElementById("01").checked;
　var c1 = d.getElementById("02").checked;

　if (c0 && c1) {
　　e.href = u;
　　e.style.display = 'inline';
　}
}
とか