1

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

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

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

var totalField = 0;

function addField(type) {
  totalField++;
  if (type === 'free') {
    freeText();
  } else if (type === 'insideQuote') {
    insideQuote();
  } else if (type === 'clipsQuote') {
    clipsQuote();
  } else if (type === 'outsideLink') {
    outsideLink();
  }
}

function freeText() {
  var form_element = document.createElement("form");
  form_element.id = 'freeText_' + totalField;
  form_element.name = 'heading_' + totalField;
  form_element.class = 'col-xs-12';

  var form_tab = document.createElement("ul");
  form_tab.id = 'myTab_' + totalField;
  form_tab.setAttribute('class', 'nav nav-tabs');
  form_tab.setAttribute('data-role', 'tablist');
  form_tab.innerHTML = '<li class="active"><a href="#jpn">日本語</a></li><li><a href="#eng">English</a></li>';

  var tab_content = document.createElement("div");
  tab_content.id = 'myTabContent_' + totalField;
  tab_content.setAttribute('class', 'tab-content');

  var jp_panel = document.createElement("div");
  jp_panel.id = "jpn";
  jp_panel.setAttribute('class', 'tab-pane active');
  jp_panel.setAttribute('aria-labelledby', 'jpn');

  var heading = document.createElement("h4");
  heading.innerText = "見出しを入力";

  var headingTitle = document.createElement("input");
  headingTitle.type = "text";
  headingTitle.id = "headingTitle_" + totalField;
  headingTitle.name = "headingTitle";
  headingTitle.placeholder = "見出し";

  var subHeading = document.createElement("h5");
  subHeading.innerText = "自由文を入力";

  var textArea = document.createElement("textarea");
  textArea.id = "content_" + totalField;
  textArea.name = "content";
  textArea.setAttribute('rows', 5);
  textArea.setAttribute('cols', 80);
  textArea.placeholder = "内容 ";

  //インナーへ挿入
  jp_panel.appendChild(heading);
  jp_panel.appendChild(headingTitle);
  jp_panel.appendChild(subHeading);
  jp_panel.appendChild(textArea);

  var eng_panel = document.createElement("div");
  eng_panel.id = "eng";
  eng_panel.setAttribute('class', 'tab-pane');
  eng_panel.setAttribute('aria-labelledby', 'eng');

  var eng_heading = document.createElement("h4");
  eng_heading.innerText = "Heading";

  var eng_headingTitle = document.createElement("input");
  eng_headingTitle.type = "text";
  eng_headingTitle.id = "eng_headingTitle_" + totalField;
  eng_headingTitle.name = "eng_headingTitle";
  eng_headingTitle.placeholder = "Cool heading";

  var eng_subHeading = document.createElement("h5");
  eng_subHeading.innerText = "Description";

  var eng_textArea = document.createElement("textarea");
  eng_textArea.id = "content_" + totalField;
  eng_textArea.name = "content";
  eng_textArea.setAttribute('rows', 5);
  eng_textArea.setAttribute('cols', 80);
  eng_textArea.placeholder = "Some dope content goes here....";

  eng_panel.appendChild(eng_heading);
  eng_panel.appendChild(eng_headingTitle);
  eng_panel.appendChild(eng_subHeading);
  eng_panel.appendChild(eng_textArea);

  //インナーを挿入
  tab_content.appendChild(jp_panel);
  tab_content.appendChild(eng_panel);

  var child_object = document.getElementById('field');
  child_object.appendChild(form_element);
  form_element.appendChild(form_tab);
  form_element.appendChild(tab_content);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div id="field" class="col-xs-12"></div>
<button class="btn btn-default" onclick="addField('free')">
  自由文
</button>

1 件の回答 1

0

二つの問題点あります:

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

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

var totalField = 0;

function addField(type) {
  totalField++;
  if (type === 'free') {
    freeText();
  } else if (type === 'insideQuote') {
    insideQuote();
  } else if (type === 'clipsQuote') {
    clipsQuote();
  } else if (type === 'outsideLink') {
    outsideLink();
  }
}

function freeText() {
  var form_element = document.createElement("form");
  form_element.id = 'freeText_' + totalField;
  form_element.name = 'heading_' + totalField;
  form_element.class = 'col-xs-12';

  var form_tab = document.createElement("ul");
  form_tab.id = 'myTab_' + totalField;
  form_tab.setAttribute('class', 'nav nav-tabs');
  form_tab.setAttribute('data-role', 'tablist');
  form_tab.innerHTML = '<li class="active"><a href="#jpn" data-toggle="tab">日本語</a></li><li><a href="#eng" data-toggle="tab">English</a></li>';

  var tab_content = document.createElement("div");
  tab_content.id = 'myTabContent_' + totalField;
  tab_content.setAttribute('class', 'tab-content');

  var jp_panel = document.createElement("div");
  jp_panel.id = "jpn";
  jp_panel.setAttribute('class', 'tab-pane active');
  jp_panel.setAttribute('aria-labelledby', 'jpn');

  var heading = document.createElement("h4");
  heading.innerText = "見出しを入力";

  var headingTitle = document.createElement("input");
  headingTitle.type = "text";
  headingTitle.id = "headingTitle_" + totalField;
  headingTitle.name = "headingTitle";
  headingTitle.placeholder = "見出し";

  var subHeading = document.createElement("h5");
  subHeading.innerText = "自由文を入力";

  var textArea = document.createElement("textarea");
  textArea.id = "content_" + totalField;
  textArea.name = "content";
  textArea.setAttribute('rows', 5);
  textArea.setAttribute('cols', 80);
  textArea.placeholder = "内容 ";

  //インナーへ挿入
  jp_panel.appendChild(heading);
  jp_panel.appendChild(headingTitle);
  jp_panel.appendChild(subHeading);
  jp_panel.appendChild(textArea);

  var eng_panel = document.createElement("div");
  eng_panel.id = "eng";
  eng_panel.setAttribute('class', 'tab-pane');
  eng_panel.setAttribute('aria-labelledby', 'eng');

  var eng_heading = document.createElement("h4");
  eng_heading.innerText = "Heading";

  var eng_headingTitle = document.createElement("input");
  eng_headingTitle.type = "text";
  eng_headingTitle.id = "eng_headingTitle_" + totalField;
  eng_headingTitle.name = "eng_headingTitle";
  eng_headingTitle.placeholder = "Cool heading";

  var eng_subHeading = document.createElement("h5");
  eng_subHeading.innerText = "Description";

  var eng_textArea = document.createElement("textarea");
  eng_textArea.id = "content_" + totalField;
  eng_textArea.name = "content";
  eng_textArea.setAttribute('rows', 5);
  eng_textArea.setAttribute('cols', 80);
  eng_textArea.placeholder = "Some dope content goes here....";

  eng_panel.appendChild(eng_heading);
  eng_panel.appendChild(eng_headingTitle);
  eng_panel.appendChild(eng_subHeading);
  eng_panel.appendChild(eng_textArea);

  //インナーを挿入
  tab_content.appendChild(jp_panel);
  tab_content.appendChild(eng_panel);

  var child_object = document.getElementById('field');
  child_object.appendChild(form_element);
  form_element.appendChild(form_tab);
  form_element.appendChild(tab_content);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div id="field" class="col-xs-12"></div>
<button class="btn btn-default" onclick="addField('free')">
  自由文
</button>

1
  • 1
    ありがとうございました。data-toggleについての知識が乏しかったようですね。大変勉強になりました。
    – user76333
    Commented 2015年3月25日 2:32

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。