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

Question

    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>

Comments

[m.ts10806]

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

[AkitoshiManabe]

https://ejje.weblio.jp/content/discription

Answer 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

Comments

[AkitoshiManabe]

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