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

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

ただいまの
回答率

90.46%

  • JavaScript

    21030questions

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

jsで変数がonclick内で見れない(初歩的な質問です)

解決済

回答 2

投稿 編集

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

hgfgjjhg

score 2

冒頭のonloadでtitle変数にidがtitleのdiv要素を入れています。
しかし、新規作成ボタン→タイトル本文入力→保存ボタン→全削除と操作すると、207行目からのonclick内で、title要素が空になっているようで、titleに入れた要素を操作できません。
alert(title)としてみても真っ白なアラートボックスが表示されるだけです。
おそらくスコープ?のせいかとも考えたのですが、何度調べてみてもよくわかりませんでした。
onclick内でtitle内にtitleのdiv要素が入っていない原因を教えていただけますでしょうか?
よろしくお願いいたします。

実行環境は最新版のchromeです。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>メモ帳</title>
    <link rel="manifest" href="./manifest.json">
    <script>
      // service workerが有効なら、service-worker.js を登録します
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('./sw.js').then(function() { console.log('Service Worker Registered'); });
     }
    </script>
    <style type="text/css">
        body{
            display: flex;
            margin: 0px;
        }
        #leftBoard{
            width: 40vw;
            height: 100vh;
            color:#000;
            background: #aaa;
        }
        #rightBoard{
            width: 60vw;
            height: 100vh;
            color: #000;
            background: #cc0;
            border: solid 1px;
        }
        #newCreate{
            display: block;
            margin: auto;
        }
        #titleBox{
            border: solid 1px;
            display: none;
        }
        #reserve{ 
            display: none;
        } 
        #contextBox{
            width: 98%;
            height: 90%;
            margin-top: 10%;
            border: solid 1px;
            display:none;
        }
        #edit{
            display: inline;
            margin: auto;
        }

        /*
        div>.test{
            color: #ff0;
            background: #00f;
            padding: 20px;
            border: solid 1px #0f0;
            text-align: center;
        }

        */
    </style>

    <script>
        let title;
        window.onload = function(){
            // const note = document.getElementById('note');
            // const memo = document.getElementById('memo');
            const newCreate = document.getElementById("newCreate");
            const titleBox = document.getElementById("titleBox");
            const contextBox = document.getElementById("contextBox");
            const reserve = document.getElementById("reserve");
            const note = document.getElementById("note");
            title = document.getElementById("title");
            const context = document.getElementById("context");
            const memo = document.getElementById("memo");
            const list = document.getElementById("list");
            numbering = 0;
            content = [];
            titleAry = [];
            count = 0;
            formatChange = function(mode){        
                titleBox.style.display = mode;
                reserve.style.display = mode;
                contextBox.style.display = mode;
            }
            writing = function(a){
                memo.innerHTML += '<div style="display: flex;">' + '<div class="listTitle" data-inputId="'+ count +'">' + a + '</div>' + '<input class="edit" type="button" value="編集" data-inputId="'+count+'">' + '</div>';    
                listTitle = document.getElementsByClassName("listTitle");
                for(let i = 0; i < numbering; i++){
                listTitle[i].addEventListener('click', function(){
                count = listTitle[i].getAttribute("data-inputId");
                title.innerText = titleAry[count];
                context.innerText = content[count];
                });
                };
            }

            title.style.display = "block";
            context.style.display = "block";
            newCreatefx = function(){
                if(reserve.style.display != "block"){
                    titleBox.value = "";
                    contextBox.value = "";
                    formatChange("block");
                    title.style.display = "none";
                    context.style.display = "none";
                    count = numbering;
                    numbering++;
                console.log("count:" + count + "numbering:" + numbering);
                };
            }
            reservefx = function(){
                let currentTitle = titleBox.value;
                let currentContext = contextBox.value;
                formatChange("none");
                title.innerText = currentTitle;
                context.innerText = currentContext;
                title.style.display = "block";
                context.style.display = "block";
                if(document.querySelectorAll("input[data-inputId='"+count+"']").length==0){
                    writing(currentTitle);
                    edit = document.getElementsByClassName('edit');
                }else{
                    listTitle = document.getElementsByClassName("listTitle");
                    for(let i = 0; i < numbering; i++){
                    listTitle[i].addEventListener('click', function(){
                    count = listTitle[i].getAttribute("data-inputId");
                    title.innerText = titleAry[count];
                    context.innerText = content[count];
                    });
                    };
                    // accessTitle = document.getElementById("listTitle" + count);
                    // accessTitle.innerHTML = currentTitle;
                };
                titleAry[count] = titleBox.value;
                content[count] = contextBox.value;
                // let editAry = Array.prototype.slice.call(edit);
                for(let i = 0; i < numbering; i++){
                    edit[i].addEventListener('click', function(){
                        count = edit[i].getAttribute("data-inputId");
                        titleBox.value = titleAry[count];
                        contextBox.value = content[count];
                        formatChange("block");
                        title.style.display = "none";
                        context.style.display = "none";
                    });
                };
                localStorage.setItem("numberingData", numbering);
                // localStorage.setItem("countData", count);
                titleReserve = titleAry.join();
                localStorage.setItem("titleData", titleReserve);
                contentReserve = content.join();
                localStorage.setItem("contentData", contentReserve);
                localStorage.setItem("memoData", memo.innerHTML);
            }

            if(window.localStorage){
                console.log("localStorage:ok");
            }
            if(window.sessionStorage){
                console.log("sessionStorage:ok");
            }
            console.log(localStorage.getItem("titleData"));
            console.log(localStorage.getItem("contentData"));
            console.log(localStorage.getItem("memoData"));
            // console.log(localStorage.getItem("contentData"));
            // console.log(localStorage.getItem("contentData"));
            if(!localStorage.getItem("titleData")){
                titleReserve = "";
            }else{
                titleReserve = localStorage.getItem("titleData");                
            }
            if(!localStorage.getItem("contentData")){
                contentReserve = "";
            }else{
                contentReserve = localStorage.getItem("contentData");
            }
            titleAry = titleReserve.split(",");
            content = contentReserve.split(",");
            memo.innerHTML = localStorage.getItem("memoData");
            edit = document.getElementsByClassName('edit');
            console.log(edit);
            numbering = localStorage.getItem("numberingData");
            for(let i = 0; i < numbering; i++){
                edit[i].addEventListener('click', function(){
                    count = edit[i].getAttribute("data-inputId");
                    titleBox.value = titleAry[count];
                    contextBox.value = content[count];
                    formatChange("block");
                    title.style.display = "none";
                    context.style.display = "none";
                });
            };
        }
    </script>
</head>

<body>
    <div id="leftBoard">
        <div id="tool" style="display: flex">
            <input id="newCreate" type="button" value="新規作成" onclick="
                newCreatefx();
            "><input id="allDelete" type="button" value="全削除" onclick="
                numbering = 0;
                title.innerHTML = '';
                context.innerText = '';
                titleAry = [];
                content = [];
                memo.innerHTML = '';
                localStorage.removeItem('numberingData');
                localStorage.removeItem('titleData');
                localStorage.removeItem('contentData');
                localStorage.removeItem('memoData');
                console.log(title);
            ">
        </div>
        <div id="list">
            <div style="display: flex;">
                <div id="memo" style="background: #ff7f50;width:100%;"></div>
            </div>
        </div>
    </div>
    <div id="rightBoard">
        <div class="nextTo" style="display: flex;">
            <input id="titleBox" type="text">
            <input id="reserve" type="button" value="保存" onclick="
                reservefx();
            ">
        </div>
            <textarea id="contextBox"></textarea>
        <div id="note">
            <div id="title" style="background: #b0d4de"></div>
            <div id="context"></div>
        </div>
    </div>
<!--
    <div id="set01">
        <input type="text" id="note">
        <input type="button" value="保存" id="reserve01"
            onclick="
                let current = note.value;
                memo.innerText = current;
                memo.insertAdjacentHTML('afterend', '<div id=&quot;memo02&quot;></div>');
        ">
        <input type="button" value="削除" id="delete01"
            onclick="
            let setDelete = this.parentNode.parentNode;
                setDelete.removeChild(set01);
            ">
        <div id="memo"></div>
    </div>
-->
    <!-- <div><div class="test"></div></div> -->
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2019/04/16 18:20

    「(初歩的な質問です)」とつけるのではなく「初心者アイコン」をつけてください。
    あと、コードをべたっと張り付けての質問は良いのですが、自身が試す、調べる際は現象が再現する最小限のコードを試して検証してください。問題の切り分けの仕方が良くないと質問してもなかなか的確なアドバイスにはなりません。
    ※質問者さん以外は質問コードは基本的に初見です。そのあたりは考慮いただきたく

    キャンセル

  • hgfgjjhg

    2019/04/16 18:40

    アドバイスありがとうございます。
    初心者アイコンをつけるように修正いたしました。
    コードの切り分けについては、これから練習していきます。

    キャンセル

回答 2

checkベストアンサー

+3

title 要素は以下で取得できます。

document.querySelector('title')


onclick内で単にtitleと書けばtitleプロパティが参照されます。

また、title要素はテキストしか入れられないため、divなどは入りません。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/title

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/04/16 18:37

    誤解を生む書き方をしてしまい申し訳ありません。
    title要素を取得したいのではなく、<div id="title">を取得したいのです。
    77行目でtitle=document.getElementById('title');
    としており、このtitleという名前の変数に入れたdiv要素に対して操作しようとしています。

    キャンセル

  • 2019/04/16 18:53

    onclick内でtitleとするとthis.titleと同義になるんですね!
    ありがとうございます。

    キャンセル

+1

titleという予約語をつかってるからでしょうね

  • NG
<script>
var title;
window.onload = function(){
  title = document.getElementById("title");
}
</script>
<input id="allDelete" type="button" value="全削除" onclick="console.log(title);">
<div id="title" style="background: #b0d4de"></div>
  • OK
<script>
var title2;
window.onload = function(){
  title2 = document.getElementById("title");
}
</script>
<input id="allDelete" type="button" value="全削除" onclick="console.log(title2);">
<div id="title" style="background: #b0d4de"></div>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 90.46%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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

  • JavaScript

    21030questions

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