0

だから私は簡単なフローチャートを書いています。おそらくこれは非常に間違っていますが、設計的にはうまくいくようです。コードに関しては、私は何か間違ったことをしたようです。4 つの要素、h1、およびオプションを表示する 3 つの div を表示することになっています。[はい] または [いいえ] をクリックすると、あなたに関連する他の要素が表示されます。ここでの選択は私のマークアップであり、 http: //validator.w3.org/で実行しましたが、問題ないと表示されます。

150 行目で、dreamweaver (使用したプログラム) に構文エラーがあると表示されます。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
body{background-color:#999}
p{color:#0CF}
h1{
    color:#03C;
    text-align:center;
}

#q1{
    position:absolute;
    left:293px;
    top:41px;
    border:thin black solid;
    background-color:#9CF;
    width: 531px;
    height: 72px;
    font-size:64px
}
#q2{
    position:absolute;
    left:424px;
    top:257px;
    border:thin black solid;
    background-color:#9CF;
    width: 62px;
    height: 54px;
    font-size:48px;
}
#q3{
    position:absolute;
    left:633px;
    top:405px;
    border:thin black solid;
    background-color:#9CF;
    width: 186px;
    height: 39px;
    font-size:32px
}
#q4{
    position:absolute;
    left:494px;
    top:145px;
    border:thin black solid;
    background-color:#9CF;
    width: 100px;
    height: 165px;
    font-size:36px
}
#q5{
    position:absolute;
    left:633px;
    top:255px;
    border:thin black solid;
    background-color:#9CF;
    width: 74px;
    height: 55px;
    font-size:48px;
}
#q6{
    position:absolute;
    left:573px;
    top:407px;
    border:thin black solid;
    background-color:#9CF;
    width: 50px;
    height: 39px;
    font-size: 36px
}
#q7{
    position:absolute;
    left:240px;
    top:404px;
    border:thin black solid;
    background-color:#9CF;
    width: 246px;
    height: 41px;
    font-size:36px;
}
#q8{
    position:absolute;
    left:671px;
    top:317px;
    border:thin black solid;
    background-color:#000;
    width: 2px;
    height: 82px;
}
#q11{
    position:absolute;
    left:854px;
    top:453px;
    border:thin black solid;
    background-color:#000;
    width: 5px;
    height: 59px;
    font-size:36px;
}
#q12{
    position:absolute;
    left:449px;
    top:319px;
    border:thin black solid;
    background-color:#000;
    width: 4px;
    height: 78px;
    font-size:36px;
}
#q13{
    position:absolute;
    left:551px;
    top:519px;
    border:thin black solid;
    background-color:#9CF;
    width: 371px;
    height: 44px;
    font-size:36px;
}
#q14{
    position:absolute;
    left:826px;
    top:401px;
    border:thin black solid;
    background-color:#9CF;
    width: 61px;
    height: 44px;
    font-size:36px;
}
#q15{
    position:absolute;
    left:602px;
    top:454px;
    border:thin black solid;
    background-color:#000;
    width: 5px;
    height: 57px;
    font-size:36px;
}
.hidden{
    visibility:hidden
}
</style>
<script>
function show (x) {
        var a=document.getElementById(x)
        a.style.visiblity.visible
</script>
</head>

<!-- ADD IDS TO HIDDEN CLASSES, MAKE FUNCTION TO SHOW THEM ON NON-HIDDEN ELEMENTS -->
<body>
<div id="q1">Should You Worry?</div>
<div id="q2" onClick="show('q7')">No</div>
<div id="q3" class="hidden" >Can you fix it?</div>
<div id="q4"> Do you have a problem?</div>
<div id="q5" onClick="show('q3,q6,q14')">Yes</div>
<div id="q6" class="hidden" onClick="show('q13')">No</div>
<div id="q7" class="hidden">Then don't worry</div>
<div id="q8" class="hidden"></div>
<div id="q11" class="hidden"></div>
<div id="q12" class="hidden"></div>
<div id="q13" class="hidden">Then don't worry about it!</div>
<div id="q14" class="hidden" onClick="show('q13')">Yes</div>
<div id="q15" class="hidden"></div>
</body>
</html>
4

3 に答える 3

0

これを使用できるように、多くのパラメーターを show() に送信するためshow('q3,q6,q14')：

function show(x) {
    x_arr = [];
    x_arr = x.split(',');
    for (i = 0; i < x_arr.length; i++) {
        var a = document.getElementById(x_arr[i]);
        a.style.visiblity = 'visible';
    }
};
于 2013-09-24T20:32:02.137 に答える
0

show() は次のようにする必要があります。

function show(x) {
    var a=document.getElementById(x);
    a.style.visibility = "visible";
}

次の[1]visibilityの値を設定する必要があります。

  • 隠れた
  • 見える
  • 崩壊
  • 継承する

を使用するa.style.visibility.visibleと、存在しない「visibility」内の「visible」プロパティにアクセスしようとしています。スタイル プロパティが保持するものに関する完全な情報については、firebug/devtools を開き、document.getElementById('xxx').style;コンソールに書き込みます (xxx は要素の ID です)。これにより、スタイル内のすべてのプロパティが一覧表示されます (すべて文字列として表示されます)。

ここに画像の説明を入力

詳細については、MDN HTMLElement.styleを参照してください。

注意すべきことの 1 つは、存在しないものをshow('q3,q6,q14')試行している (のようなものを探している) ことです。その使用のために：document.getElementById('q3,q6,q14')<element id="q3,q6,q14">

<div id="q5" onClick="show('q3');show('q6');show('q14');">Yes</div>

または、show()を新しいものに変更することもできます (ただし、IE7 をサポートしないというコストがかかります)。

function show(x) {
    var a=document.querySelectorAll(x);
    for(var i=0;i<a.length;i++){
        a[i].style.visibility = "visible";
    }
}

CSS セレクターで使用すると、次のものが受け入れられ,ます。

<div id="q5" onClick="show('#q3,#q6,#q14');">Yes</div>

以下の IE7 をサポートする必要がある場合は、Sergio の回答で十分です。

于 2013-09-24T20:26:18.693 に答える