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

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

ただいまの
回答率

89.23%

dom操作後のaddeventlistenerが動かない。

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 231

jouson-129

score 14

    const wrwpper = document.querySelector("#wrapper"),
           playground = document.querySelector("#playground"),
           operator = document.querySelector("#operator"),
           discription = document.querySelector("#discription"),
           WIDTH = playground.clientHeight,
           HEIGHT = playground.clientWidth;
     playground.addEventListener("click",start);

     const htmltag = ["article","selection","nav","aside","h"+"hnumber","header","footer","address"];
     const cssstyle = ["width","font","text-align","line-height","color","background","margin","padding","border"]


  function Showsomething(wrapper_id,usearray,event,clickevent){ 
    var wrapper = Setdom("div",operator,wrapper_id);
        flagment = document.createDocumentFragment();
    for(let i=0;i<usearray.length;i++){
      let button = document.createElement("button");
      button.textContent = usearray[i];
      button.style.width = WIDTH*0.2 + "px";
      button.style.height = HEIGHT*0.1 + "px";
      button.addEventListener(event,clickevent);
      flagment.appendChild(button);
    }
  wrapper.appendChild(flagment);
  }

    function Showhtml(){
      Showsomething("htmlwrapper",htmltag,"click",Sethtml);
     }

  function Counttag(tag){
    return count = playground.getElementsByTagName(tag).length; 
  }

  function Sethtml(){
    tag = this.textContent;
    count = Counttag(tag);
    nowelement = Setdom(tag,playground,tag + "_" +count,"defined_style");
    console.log(nowelement);
    Showcss();
  }

  function Setdom(element_tag, parentHTML, element_id, element_class) {
    var element = document.createElement(element_tag);
    parentHTML.appendChild(element);
    element.setAttribute("id", element_id);
    if (element_class) {
        element.classList.add(element_class);
    }
    return element;
  }

  function test(){
    alert("Showcss");
  }

  function Showcss(){
document.querySelector("#htmlwrapper").parentNode.removeChild(document.querySelector("#htmlwrapper"));
    Showsomething("csswrapper",cssstyle,"click",test);
   const unitselect = '<form id="cssunit_wrapper"><input type="radio" name="cssvalue_unit" value="px">px<input type="radio" name="cssvalue_unit" value="vw">vh<input type="radio" name="cssvalue_unit" value="vh">vh<input type="radio" name="cssvalue_unit" value="%">%</form>';
   const value = '<input id="cssvalue" type="text" maxlength="8"></input>';
    document.querySelector("#csswrapper").innerHTML += unitselect+value;
  } 

javascriptでhtml.cssを構築できるようなものを作っています。
その中でhtmlのタグを選んだ後にcssのプロパティを選べるようにしたいです。
しかし、2回目にイベントを与えることになる

Showsomething("csswrapper",cssstyle,"click",test);


ここでイベントが加わっていないようです。
かいけつほうほう

<div id="wrapper">
<div id="playground">
</div>
<div id="operator">
</div>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2019/12/20 23:41

    質問が途中で切れているように見受けられます。
    質問は編集できますので落ち着いて編集し、投稿前にプレビュー確認してください

    キャンセル

  • キャンセル

回答 1

+1

javascriptでhtml.cssを構築できるようなもの

getComputedStyle() もあります。


Showsomething("csswrapper",cssstyle,"click",test);
ここでイベントが加わっていないようです。

当然です。関数は沢山宣言されていますが、何一つ実行されてません。
また、playground.addEventListener("click",start); のイベントリスナである start 関数は宣言すらされていません。


コードが不完全なのは、ご自身も混乱されている証拠

Google JavaScript Style Guide 和訳 では誰もが読みやすい JavaScript の書き方を推奨しています。せめて、関数名や変数名、定数名はネイティブな実装に合わせた命名で書き直されてはいかがでしょう?

  • コンストラクタ関数 : PascalCase
  • 他の関数/メソッド : camelCase
  • 変数/プロパティ名 : camelCase
  • 定数 : UPPER_SNAKE_CASE
  • 要素の属性値 : kebabu-case

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/12/21 12:56

    [Google JavaScript Style Guide]のような文書の存在は 「勝手な様式で書く人は雇用する価値もない」という意味すら感じますよね。

    キャンセル

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

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