質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    20415questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

希望する変数に値がうまくセットされない

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 668

下記
サンプルソースにて
oldcheck という変数に値がうまくセットされません

このサンプルソースで表示されるWEB画面にて
○をクリックすると、●になり
別の○をクリックすると、前に●になったところが○に戻るように
したいのですが、
その場所を示す oldcheck の変数に値がうまく入ってきません

function check の中で
checkclearの行をコメントにすると変数には値が
正しくセットされますが、
その場合当然、●が○にならないため、希望通りの動きになりません。

javascriptに慣れていないため、原因がわからず困っています。

どなたかご教授のほどお願いいたします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">

<link rel="stylesheet" href="tableset.css" type="text/css">

<script>

    var oldcheck = '';
    var nowcheck = '';
    var leaveno=0;
    var setno=0;
</script>
<script>

// 引数で指定したindexnoに応じたIDを持つ要素を#ulistに追加
function add(indexno)
{
    // #ulistというIDを持つ要素を取得
    var parent_object = document.getElementById("ulist");

    // parent_objectが存在しない時は処理を中断
    if (!parent_object) {
      return;
    }

    setno++;
    setid = 'set' + ('0000'+setno).slice(-4);

    // <div1>などの定義されていない要素ではなく<div>を生成する
    var div_element = document.createElement("div");
    // 生成したdiv要素にIDを追加
    div_element.id = "div"+indexno;
    // 生成したdiv要素の内容を指定したHTMLに書き換える
    addtable =    '<table class="set_table" border="1">';
    addtable +=    '<tr><td class="td" width="40" align="center">';

    addtable +=    '<a href="#" onclick="check(\'';
    addtable +=    setid +'\')" class="undernone">';
    addtable +=    '<span id="';
    addtable +=    setid + '">';


    addtable +=    '○';

    addtable +=    '</span></a>';


    addtable +=    '</td>';
    addtable +=    '<td class="td" width="60" align="center">00['+indexno+']</td>';
    addtable +=    '<td class="td" width="60" align="center">氏名['+indexno+']</td>';
    addtable +=    '<td class="td" width="300" align="left">住所['+indexno+']</td>';
    addtable +=    '<td class="td" width="100" align="center">03-xxxx-xxx'+indexno+'</td>';
    addtable +=    '</tr>';
    addtable +=    '</table>';
    div_element.innerHTML = addtable;
    // 生成したdiv要素を#ulistの子要素としてDOMに追加する
    parent_object.appendChild(div_element);
}


function add2(indexno)
{
    // #ulistというIDを持つ要素を取得
    var parent_object = document.getElementById("ulist2");

    // parent_objectが存在しない時は処理を中断
    if (!parent_object) {
      return;
    }

    leaveno++;
    leaveid = 'leave' + ('0000'+leaveno).slice(-4);

    // <div1>などの定義されていない要素ではなく<div>を生成する
    var div_element = document.createElement("div");
    // 生成したdiv要素にIDを追加
    div_element.id = "div_l_"+indexno;

    // 生成したdiv要素の内容を指定したHTMLに書き換える

    addtable2 =    '<table class="leave_table">';
    addtable2 +=    '<tr><td class="td" width="40" align="center">';


    addtable2 +=    '<a href="#" onclick="check(\'';
    addtable2 +=    leaveid +'\')" class="undernone">';
    addtable2 +=    '<span id="';
    addtable2 +=    leaveid + '">';


    addtable2 +=    '○';

    addtable2 +=    '</span></a>';

    addtable2 +=    '</td>';
    addtable2 +=    '<td class="td" width="60" align="center">';
    addtable2 +=    '氏名['+indexno+']';
    addtable2 +=    '</td>';
    addtable2 +=    '<td class="td" width="360" align="left">';
    addtable2 +=    '住所['+indexno+']';
    addtable2 +=    '</td>';
    addtable2 +=    '<td class="td" width="100" align="center">';
    addtable2 +=    '03-xxxx-xxx'+indexno;
    addtable2 +=    '</td>';
    addtable2 +=    '</tr>';
    addtable2 +=    '</table>';

    div_element.innerHTML = addtable2;

    // 生成したdiv要素を#ulistの子要素としてDOMに追加する
    parent_object.appendChild(div_element);
}

// 引数で指定したindexnoに応じたIDを持つ要素を削除
function del(indexno)
{
    // 追加した要素から指定したIDを持つ要素を取得
    var div_element = document.getElementById("div"+indexno);

    // 要素を取得できたときだけ削除を実行する
    if (div_element) {
      // 取得した要素を削除
      // div_elementがちゃんとremoveChildの対象である子要素となるようにする
      // 「div_elementの親要素」(div_element.parentNode)「の子要素であるdiv_elementを削除」(.removeChild(div_element))とすることでdiv_elementを削除できる
      div_element.parentNode.removeChild(div_element);
    }
}


// 引数で指定したindexnoに応じたIDを持つ要素を削除
function del2(indexno)
{
    // 追加した要素から指定したIDを持つ要素を取得
    var div_element = document.getElementById("div_l_"+indexno);

    // 要素を取得できたときだけ削除を実行する
    if (div_element) {
      // 取得した要素を削除
      // div_elementがちゃんとremoveChildの対象である子要素となるようにする
      // 「div_elementの親要素」(div_element.parentNode)「の子要素であるdiv_elementを削除」(.removeChild(div_element))とすることでdiv_elementを削除できる
      div_element.parentNode.removeChild(div_element);
    }
}

function checkclear(id) {
    var clearpoint = document.getElementById(id);
    alert('clear='+id);
    clearpoint.innerHTML = '○';
}

function checkset(id) {
    var checkpoint = document.getElementById(id);
    checkpoint.innerHTML = '●';
}
function check(checkid) {

    alert('checkid='+checkid + '  oldcheck='+oldcheck);

    checkset(checkid);

    if (oldcheck!=checkid) {
        alert('def checkid='+checkid + '  oldcheck='+oldcheck);
        checkclear(oldcheck);
#↑の行をコメントにすると変数には希望の値がセットされる
        oldcheck = checkid;
    }

    alert('clear oldcheck='+oldcheck);


}

</script>
</head>

<body>

<div>
<button onclick="add(1);">No1を追加!</button>
<button onclick="add(2);">No2を追加!</button>
<button onclick="add(3);">No3を追加!</button>
<button onclick="add(4);">No4を追加!</button>
<button onclick="add(5);">No5を追加!</button>
<br>
<button onclick="del(1);">[No1]を削除</button>
<button onclick="del(2);">[No2]を削除</button>
<button onclick="del(3);">[No3]を削除</button>
<button onclick="del(4);">[No4]を削除</button>
<button onclick="del(5);">[No5]を削除</button>
<button onclick="del(0);">[No0]を削除</button>
</div>
<hr>
<div>
<button onclick="add2(1);">No1を追加!</button>
<button onclick="add2(2);">No2を追加!</button>
<button onclick="add2(3);">No3を追加!</button>
<button onclick="add2(4);">No4を追加!</button>
<button onclick="add2(5);">No5を追加!</button>
<br>
<button onclick="del2(1);">[No1]を削除</button>
<button onclick="del2(2);">[No2]を削除</button>
<button onclick="del2(3);">[No3]を削除</button>
<button onclick="del2(4);">[No4]を削除</button>
<button onclick="del2(5);">[No5]を削除</button>
<button onclick="del2(0);">[No0]を削除</button>
</div>


<div id="ulist">

<table class="set_table_title" border="1"><tr><td> 入居者リスト/入居予定リスト</td></tr></table>

    <table class="set_table" border="1">
    <tr>
    <th class="th" width="40">対象</th>
    <th class="th" width="60">部屋番号</th>
    <th class="th" width="60">氏名</th>
    <th class="th" width="300">住所</th>
    <th class="th" width="100">電話番号</th>
    </tr>
    </table>

    <div id="set0">

    <table class="set_table" border="1">
    <tr>
    <td class="td" width="40" align="center"><a href="#" onclick="check('set0')" class="undernone"><span id="set0">○</span></a></td>
    <td class="td" width="60" align="center">xxx</td>
    <td class="td" width="60" align="center">xxx</td>
    <td class="td" width="300" align="left">住所0</td>
    <td class="td" width="100" align="center">03-xxxx-xxxx</td>
    </tr>
    </table>

    </div>

</table>

</div>

<hr>

<div id="ulist2">

<table class="leave_table_title" border="1"><tr><td>退去者リスト</td></tr></table>

    <table class="leave_table" border="1">
    <tr>
    <th class="th" width="40">対象</th>
    <th class="th" width="60">氏名</th>
    <th class="th" width="360">住所</th>
    <th class="th" width="100">電話番号</th>
    </tr>
    </table>

    <div id="leave0">

    <table class="leave_table" border="1">
    <tr>
    <td class="td" width="40" align="center"><a href="#" onclick="check('leave0')" class="undernone"><span id="leave0">○</span><a></td>
    <td class="td" width="60" align="center">xxxx</td>
    <td class="td" width="360" align="left">住所0</td>
    <td class="td" width="100" align="center">03-xxxx-xxxx</td>
    </tr>
    </table>

    </div>
</table>
</div>



</body>
</html>
.undernone{
    text-decoration:none;
}

.set_table_title{
width:560px;
background-color: #ffb6c1;
border-collapse: collapse;
border-spacing: 0px;
border-style: thin solid #000000;
font-size:small;
color:#000000;
}

.set_table{
width: 560px;
border-collapse: collapse;
background-color: transparent;
font-size:small;
border-style: thin solid #000000;
}

.set_table th{
padding: 0px;
text-align: center;
color: #000000;
font-size:small;
background-color: #ffe4c4;
}

.set_table td{
padding: 0px;
text-decoration: none;
font-size:small;
color:#000000;
background-color: #ffffff;
}

.leave_table_title{
width:560px;
background-color: #228b22;
border-collapse: collapse;
border-spacing: 0px;
border-style: thin solid #000000;
font-size:small;
color:#ffffff;
}

.leave_table{
width: 560px;
border-collapse: collapse;
border-style: thin solid #000000;
background-color: transparent;
font-size:small;
}

.leave_table th{
padding: 0px;
text-align: center;
color: #000000;
font-size:small;
background-color: #fffacd;
border-style: thin solid #000000;
}

.leave_table td{
padding: 0px;
text-decoration: none;
font-size:small;
color:#000000;
background-color: #ffffff;
border: thin solid #000;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

check()からcheckclear()が呼ばれた時、「oldcheck」に値が入っていない(空文字)時にcheckclear()の var clearpoint = document.getElementById(id);が想定しているタグを取得できていないため、エラーになっているようです。

1回目のクリックでは「oldcheck」に値は入っていないと思いますので、値が入っていない場合に処理を行わないようなロジックを追加すればよさそうですね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/30 13:53

    ありがとうございました。
    単純なことでしたね。
    毎回 宣言するので、そういった問題は起こらないのかと思っていました
    (変数値がブランクのときは、結果的にクリアされないので、ヨシとしていました)

    きちんと処理を書かないとダメですね

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20415questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。