Javascript : クリックで追加したtab要素に切り替えさせる

投稿者: Anonymous

ボタンをクリック後、フォームを挿入してさらにマルチ言語用にタブ切り替えを実装させたいのですが、うまく行きません。

なんとかしてクリック毎にidを振り当ててその要素にタブ切り替えのファンクションを振り当てたいです。

どんな些細な事でも構いませんのでどなたかご指摘を宜しくお願いいたします。

_x000D_

_x000D_

var totalField = 0;_x000D_
_x000D_
function addField(type) {_x000D_
  totalField++;_x000D_
  if (type === 'free') {_x000D_
    freeText();_x000D_
  } else if (type === 'insideQuote') {_x000D_
    insideQuote();_x000D_
  } else if (type === 'clipsQuote') {_x000D_
    clipsQuote();_x000D_
  } else if (type === 'outsideLink') {_x000D_
    outsideLink();_x000D_
  }_x000D_
}_x000D_
_x000D_
function freeText() {_x000D_
  var form_element = document.createElement("form");_x000D_
  form_element.id = 'freeText_' + totalField;_x000D_
  form_element.name = 'heading_' + totalField;_x000D_
  form_element.class = 'col-xs-12';_x000D_
_x000D_
  var form_tab = document.createElement("ul");_x000D_
  form_tab.id = 'myTab_' + totalField;_x000D_
  form_tab.setAttribute('class', 'nav nav-tabs');_x000D_
  form_tab.setAttribute('data-role', 'tablist');_x000D_
  form_tab.innerHTML = '<li class="active"><a href="#jpn">日本語</a></li><li><a href="#eng">English</a></li>';_x000D_
_x000D_
  var tab_content = document.createElement("div");_x000D_
  tab_content.id = 'myTabContent_' + totalField;_x000D_
  tab_content.setAttribute('class', 'tab-content');_x000D_
_x000D_
  var jp_panel = document.createElement("div");_x000D_
  jp_panel.id = "jpn";_x000D_
  jp_panel.setAttribute('class', 'tab-pane active');_x000D_
  jp_panel.setAttribute('aria-labelledby', 'jpn');_x000D_
_x000D_
  var heading = document.createElement("h4");_x000D_
  heading.innerText = "見出しを入力";_x000D_
_x000D_
  var headingTitle = document.createElement("input");_x000D_
  headingTitle.type = "text";_x000D_
  headingTitle.id = "headingTitle_" + totalField;_x000D_
  headingTitle.name = "headingTitle";_x000D_
  headingTitle.placeholder = "見出し";_x000D_
_x000D_
  var subHeading = document.createElement("h5");_x000D_
  subHeading.innerText = "自由文を入力";_x000D_
_x000D_
  var textArea = document.createElement("textarea");_x000D_
  textArea.id = "content_" + totalField;_x000D_
  textArea.name = "content";_x000D_
  textArea.setAttribute('rows', 5);_x000D_
  textArea.setAttribute('cols', 80);_x000D_
  textArea.placeholder = "内容 ";_x000D_
_x000D_
  //インナーへ挿入_x000D_
  jp_panel.appendChild(heading);_x000D_
  jp_panel.appendChild(headingTitle);_x000D_
  jp_panel.appendChild(subHeading);_x000D_
  jp_panel.appendChild(textArea);_x000D_
_x000D_
  var eng_panel = document.createElement("div");_x000D_
  eng_panel.id = "eng";_x000D_
  eng_panel.setAttribute('class', 'tab-pane');_x000D_
  eng_panel.setAttribute('aria-labelledby', 'eng');_x000D_
_x000D_
  var eng_heading = document.createElement("h4");_x000D_
  eng_heading.innerText = "Heading";_x000D_
_x000D_
  var eng_headingTitle = document.createElement("input");_x000D_
  eng_headingTitle.type = "text";_x000D_
  eng_headingTitle.id = "eng_headingTitle_" + totalField;_x000D_
  eng_headingTitle.name = "eng_headingTitle";_x000D_
  eng_headingTitle.placeholder = "Cool heading";_x000D_
_x000D_
  var eng_subHeading = document.createElement("h5");_x000D_
  eng_subHeading.innerText = "Description";_x000D_
_x000D_
  var eng_textArea = document.createElement("textarea");_x000D_
  eng_textArea.id = "content_" + totalField;_x000D_
  eng_textArea.name = "content";_x000D_
  eng_textArea.setAttribute('rows', 5);_x000D_
  eng_textArea.setAttribute('cols', 80);_x000D_
  eng_textArea.placeholder = "Some dope content goes here....";_x000D_
_x000D_
  eng_panel.appendChild(eng_heading);_x000D_
  eng_panel.appendChild(eng_headingTitle);_x000D_
  eng_panel.appendChild(eng_subHeading);_x000D_
  eng_panel.appendChild(eng_textArea);_x000D_
_x000D_
  //インナーを挿入_x000D_
  tab_content.appendChild(jp_panel);_x000D_
  tab_content.appendChild(eng_panel);_x000D_
_x000D_
  var child_object = document.getElementById('field');_x000D_
  child_object.appendChild(form_element);_x000D_
  form_element.appendChild(form_tab);_x000D_
  form_element.appendChild(tab_content);_x000D_
}

_x000D_

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<script src="https//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>_x000D_
_x000D_
<div id="field" class="col-xs-12"></div>_x000D_
<button class="btn btn-default" onclick="addField('free')">_x000D_
  自由文_x000D_
</button>

_x000D_

_x000D_

_x000D_

解決

二つの問題点あります:

  1. BootstrapのJSのURLにはhttpsの後はコロン(:)がないから、Javascriptはロードしていません。
  2. タブにはdata-toggle="tab"との属性がないから、タブの切り替え機能は有効化していません。

下記のように修正したら、正しく動きます。

_x000D_

_x000D_

var totalField = 0;_x000D_
_x000D_
function addField(type) {_x000D_
  totalField++;_x000D_
  if (type === 'free') {_x000D_
    freeText();_x000D_
  } else if (type === 'insideQuote') {_x000D_
    insideQuote();_x000D_
  } else if (type === 'clipsQuote') {_x000D_
    clipsQuote();_x000D_
  } else if (type === 'outsideLink') {_x000D_
    outsideLink();_x000D_
  }_x000D_
}_x000D_
_x000D_
function freeText() {_x000D_
  var form_element = document.createElement("form");_x000D_
  form_element.id = 'freeText_' + totalField;_x000D_
  form_element.name = 'heading_' + totalField;_x000D_
  form_element.class = 'col-xs-12';_x000D_
_x000D_
  var form_tab = document.createElement("ul");_x000D_
  form_tab.id = 'myTab_' + totalField;_x000D_
  form_tab.setAttribute('class', 'nav nav-tabs');_x000D_
  form_tab.setAttribute('data-role', 'tablist');_x000D_
  form_tab.innerHTML = '<li class="active"><a href="#jpn" data-toggle="tab">日本語</a></li><li><a href="#eng" data-toggle="tab">English</a></li>';_x000D_
_x000D_
  var tab_content = document.createElement("div");_x000D_
  tab_content.id = 'myTabContent_' + totalField;_x000D_
  tab_content.setAttribute('class', 'tab-content');_x000D_
_x000D_
  var jp_panel = document.createElement("div");_x000D_
  jp_panel.id = "jpn";_x000D_
  jp_panel.setAttribute('class', 'tab-pane active');_x000D_
  jp_panel.setAttribute('aria-labelledby', 'jpn');_x000D_
_x000D_
  var heading = document.createElement("h4");_x000D_
  heading.innerText = "見出しを入力";_x000D_
_x000D_
  var headingTitle = document.createElement("input");_x000D_
  headingTitle.type = "text";_x000D_
  headingTitle.id = "headingTitle_" + totalField;_x000D_
  headingTitle.name = "headingTitle";_x000D_
  headingTitle.placeholder = "見出し";_x000D_
_x000D_
  var subHeading = document.createElement("h5");_x000D_
  subHeading.innerText = "自由文を入力";_x000D_
_x000D_
  var textArea = document.createElement("textarea");_x000D_
  textArea.id = "content_" + totalField;_x000D_
  textArea.name = "content";_x000D_
  textArea.setAttribute('rows', 5);_x000D_
  textArea.setAttribute('cols', 80);_x000D_
  textArea.placeholder = "内容 ";_x000D_
_x000D_
  //インナーへ挿入_x000D_
  jp_panel.appendChild(heading);_x000D_
  jp_panel.appendChild(headingTitle);_x000D_
  jp_panel.appendChild(subHeading);_x000D_
  jp_panel.appendChild(textArea);_x000D_
_x000D_
  var eng_panel = document.createElement("div");_x000D_
  eng_panel.id = "eng";_x000D_
  eng_panel.setAttribute('class', 'tab-pane');_x000D_
  eng_panel.setAttribute('aria-labelledby', 'eng');_x000D_
_x000D_
  var eng_heading = document.createElement("h4");_x000D_
  eng_heading.innerText = "Heading";_x000D_
_x000D_
  var eng_headingTitle = document.createElement("input");_x000D_
  eng_headingTitle.type = "text";_x000D_
  eng_headingTitle.id = "eng_headingTitle_" + totalField;_x000D_
  eng_headingTitle.name = "eng_headingTitle";_x000D_
  eng_headingTitle.placeholder = "Cool heading";_x000D_
_x000D_
  var eng_subHeading = document.createElement("h5");_x000D_
  eng_subHeading.innerText = "Description";_x000D_
_x000D_
  var eng_textArea = document.createElement("textarea");_x000D_
  eng_textArea.id = "content_" + totalField;_x000D_
  eng_textArea.name = "content";_x000D_
  eng_textArea.setAttribute('rows', 5);_x000D_
  eng_textArea.setAttribute('cols', 80);_x000D_
  eng_textArea.placeholder = "Some dope content goes here....";_x000D_
_x000D_
  eng_panel.appendChild(eng_heading);_x000D_
  eng_panel.appendChild(eng_headingTitle);_x000D_
  eng_panel.appendChild(eng_subHeading);_x000D_
  eng_panel.appendChild(eng_textArea);_x000D_
_x000D_
  //インナーを挿入_x000D_
  tab_content.appendChild(jp_panel);_x000D_
  tab_content.appendChild(eng_panel);_x000D_
_x000D_
  var child_object = document.getElementById('field');_x000D_
  child_object.appendChild(form_element);_x000D_
  form_element.appendChild(form_tab);_x000D_
  form_element.appendChild(tab_content);_x000D_
}

_x000D_

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>_x000D_
_x000D_
<div id="field" class="col-xs-12"></div>_x000D_
<button class="btn btn-default" onclick="addField('free')">_x000D_
  自由文_x000D_
</button>

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *