0

Совсем новичок в JavaScript. Заранее извиняюсь за глупые вопросы. Вот у меня например есть слово в виде кнопки

<input type="submit" name="key" value='word' onClick='search_tag()'>

и у меня есть название тега в теге

<button type="button" class="btn btn-default btn-lg" id="n_1">Name Entities</button>

Нужно сделать так, чтобы при нажатии на кнопку со словом, а потом после нажатия на кнопку с названием тега у меня на HTML-странице показывался вот такое текст word

То есть принажата на кнопку со словом, а потом при нажатии на кнопку с названием тега, я соответствующее слово оборачиваю в выбранный тег. Я ставила onClick с функциями в тег со словом и в тег с названием тега, но в итоге запуталась, и получить желаемое не удалось. Помогите , пожалуйста, новичку. Как все-таки надо расположить эти функции, которые приекрепляются к onClick, чтобы все более менее работало нормально

Вот здесь разметка HTML, и мои безуспешные попытки что-то сделать

<div id="glaw">
  <div class="block1" id='div_1'>
    <div align="center">
      <font size="5px"><b>Problem:</b></font>
      <br/>
      <table align="center">
        <tr>
          <td>
            <button type="button" class="btn btn-default btn-lg" onclick=""><span class="glyphicon glyphicon-chevron-left"></span>
                                <!--Button to return to previous problem.-->
                            </button>
          </td>
          <td>
          </td>
          <td>
            <textarea style="width:1300px; height:130px; resize: none;" readonly="readonly" wrap="hard" id="text">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</textarea>
          </td>
          <td>
          </td>
          <td>
            <button type="button" onclick=""><span class="glyphicon glyphicon-chevron-right"></span>
                            </button>
          </td>
        </tr>
      </table>
      <br/>
      <br/>
      <font size="5px"><b>Workspace:</b></font>
      <br/>
      <script type="text/javascript">
        var i = 0;
        var arr = []
        var tmp = 0;
        var tmp_element;
        var val = 0;
        var container = document.getElementById('text');

        var lst_words = container.innerHTML.split(/\s+/);
        var str = '';

        var val;

        /* function get(Element){
             tmp_element = Element;
             tmp = Element.TagName
        }
        */

        for (var i = 0; i < lst_words.length; ++i) {
          if (lst_words[i]) {
            lst_words[i] = '<input type="submit" name="key" value=' + lst_words[i].replace(/[^A-Za-zА-Яа-яЁё]/g, "") + " onClick='search_tag(this)'" + '>'
          }
        }

        for (var i = 0; i < lst_words.length; ++i) {
          document.write(lst_words[i]);
        }
      </script>
      <!--<font size="5px"><b>Tracking:</font></b><br/>-->
      <button type="button" size="5px" onClick="write()"><b>Tracking:</b></button>
      </br>
      <script type="text/javascript">
        function get(Element) {
          tmp_element = Element;
          tmp = Element.value;
        }

        function write() {
          for (var index = 0; index < arr.length; ++index) {
            document.write(arr[index])
          }

        }

        function search_tag(item) {
          val = item.value;
          if (tmp != 0) {
            arr[i] = '<input type="submit" name="key" value=' + '<' + tmp + '>' + val + '<' + tmp + '/>' + " onClick='search_tag(this)'" + '>'
              ++i;
          }

          /*if(tmp != 0){
              e = document.getElementById('div_1')
              e.innerhtml += '<' + tmp + '>' + val + '<' + tmp +'/>'
              //document.div.innerHTML += '<' + tmp + '>' + val + '<' + tmp +'/>'
              /*document.write('<input type="submit" value="' + '<' + tmp + '>' + val + '<' + tmp +'/>' + '"/>')

          }
          */

        }
      </script>
    </div>
  </div>
  <div class="block2" align="center">
    <font size="5px"><b>Step-by-step solution:</b></font>
    <br/>
    <table cellpadding="10" id="Stepping">
      <tr>
        <div id="Step">
          <td>
            <font align="left">Step 1:</font>
          </td>
          <td>
            <textarea style="width:1230px; height:100px;" wrap="hard"></textarea>
          </td>
        </div>
      </tr>
      <tr align="center">
        <td></td>
        <td>
          <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-plus"></span>
                            <!--Duplicate "Step".-->
                        </button>
        </td>
      </tr>
    </table>
  </div>
  <button tupe="button" class="block3 btn-outline-success" align="center" onClick="get(this)">
            <font size="7px"><b>Completed</b></font>
        </button>
  <button tupe="button" class="block5 btn-outline-secondary" align="center">
            <font size="7px"><b>Unresolved</b></font>
        </button>
  <div class="block4" align="center">
    <font size="5px"><b>Tools:</b></font>
    <table cellpadding="10" id="tools">
      <hr>
      <tr id="Semantics">
        <font align="center" size="4px">Semantics:</font>
        </br>
        <button type="button" value='Name Entities' onClick="get(this)">Name Entities</button>
        <button type="button" id='n_1' value='Pronoun' onClick="get(this)">Pronoun</button>
        <button type="button" id='n_2' value='Text' onClick="get(this)">Text</button>
        <button type="button" id='n_3' value='Synonym' onClick="get(this)">Synonym</button>
        <button type="button" id='n_4' value='Term' onCLick="get(this)">Term</button>
        <hr>
      </tr>
      <tr id="Parameters">
        <font align="center" size="4px">Parameters:</font>
        </br>
        <button type="button" id="n_5" value='Parameter' onClick="get(this)">Parameter</button>
        <button type="button" id="n_6" value='Measurement' onClick="get(this)">Measurement</button>
        <hr>
      </tr>
      <tr id="Attributes">
        <font align="center" size="4px">Attributes:</font>
        </br>
        <button type="button" id="n_7" value='Order' onClick="get(this)">Order</button>
        <button type="button" id="n_8" value='Fact' onClick="get(this)">Fact</button>
        <button type="button" id="n_9" value='Associated with' onClick="get(this)">Associated with</button>
        <hr>
      </tr>
      <tr>
        <a href="Specification.html" target="_blank">Specification</a>
      </tr>
    </table>
  </div>
</div>
<hr>
<div id="Savebtn">
  <button type="button">
            <!--Save current state and send to server.-->Save</button>
  <button type="button">
            <!--Cancel current state and clear all textboxes.-->Cancel</button>
</div>
<footer>
  <div class="container">
    <a href="http://sibt.co/2xhZa6M" rel="nofollow noopener" target="_blank">
    </a>
  </div>
</footer>

Там список слов, все они как кнопки. Выбирается одно слово, потом кликается кнопка с названием тега. И в итоге мы должны получить текст, который отображает, что выбранное слово обернуто в выбранный тег(то есть текст выглядит таким образом - <выбранный тег>выбранное слово<выбранный тег/>

9
  • Добавьте пожалуйста код над который вы работает, чтобы можно было отредактировать как пример. 7 авг 2018 в 9:30
  • joxi.ru/KAgGQ0QS41kV5A - код можно добавить прямо на Stackoverflow так будет удобне чтобы разобраться в чем Ваш вопрос. 7 авг 2018 в 9:36
  • var container = document.getElementById('text'); В документе отсутствует элемент с id, равным text. Из-за этого скрипт падает на следующем же выражении. Пока не ясно, на каком элементе должен быть этот id, трудно понять как ваш код должен работать.
    – Spomni
    7 авг 2018 в 14:34
  • Я просто часть кода вставила, а ту часть, в которой есть тег с id="text" не вставила. Теперь все исправила 7 авг 2018 в 15:58
  • 1
    я бы на твоем месте, пред тем как js изучать, верстать бы научился.... <font size="5px"><b>Workspace:</b></font> , О ГОСПОДИ, это что???? Кстати я атеист... И еще на дворе 21 век, когда вы про таблицы уже забудете?
    – Air
    7 авг 2018 в 16:23

1 ответ 1

1

Подобные ответы занимают до неприличия много времени. Но вы пытались справиться самостоятельно, и это заслуживает уважения.

Постарался отредактировать ваш код таким образом, чтобы как можно меньше загрузить вашу голову вещами, которых вы не знаете. Все основные изменения прокомментированы прямо в коде. Надеюсь, достаточно подробно.

Код работает немного не так, как вы описывали, но, я надеюсь, вы сможете изменить его до нужного вам состояния. Если нет - уточняйте постановку задачи. Что-нибудь придумаем ;).

<div id="glaw">
  <div class="block1" id='div_1'>
    <div align="center">
      <font size="5px"><b>Problem:</b></font>
      <br/>
      <table align="center">
        <tr>
          <td>
            <button type="button" class="btn btn-default btn-lg" onclick=""><span class="glyphicon glyphicon-chevron-left"></span>
                                <!--Button to return to previous problem.-->
            </button>
          </td>
          <td>
          </td>
          <td>
            <textarea style="width:1300px; height:130px; resize: none;" readonly="readonly" wrap="hard" id="text">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</textarea>
          </td>
          <td>
          </td>
          <td>
            <button type="button" onclick=""><span class="glyphicon glyphicon-chevron-right"></span>
                            </button>
          </td>
        </tr>
      </table>
      <br/>
      <br/>
      <font size="5px"><b>Workspace:</b></font>
      <br/>

      <!-- Для начала, требуется преобразовать текст в набор кнопок.
        С этим вы справились, поэтому ваш код оставим, но слегка подредактируем.
        Для лучшей читаемости, уберем из данного блока все, что не относится
          к преобразованию слов в кнопки.
        Изменим название аргумента в обработчике клика. Зачем? Будем привыкать работать с событиями.
        Так же поменяется название функции-обработчика. Аргументация будет при
          её объявлении.
        Завернем кнопки в отдельный контейнер. Для красоты и удобства.
      -->
      <div class="word-buttons-container">
        <script type="text/javascript">
          var container = document.getElementById('text');

          var lst_words = container.innerHTML.split(/\s+/);

          for (var i = 0; i < lst_words.length; ++i) {
            if (lst_words[i]) {
              lst_words[i] = '<input type="submit" name="key" value='
                           + lst_words[i].replace(/[^A-Za-zА-Яа-яЁё]/g, "")
                           + " onClick='printWord(event)'" + '>'
            }
          }

          for (var i = 0; i < lst_words.length; ++i) {
            /* document.write() - метод древний и малоиспользуемый, т.к. позволяет
             *   дописывать DOM дерево только пока документ не загружен до конца.
             * В текущем контексте его использование уместно.
             * Все другие ваши попытки выводить текст с помощью этого метода, изначально
             *   были обречены на провал, именно из-за того, что при его последующих 
             *   вызовах документ уже полностью загружен.
             */
            document.write(lst_words[i]);
          }
        </script>
      </div>

      <font size="5px"><b>Tracking:</font></b><br/>

      <!-- Результаты нажатия кнопок будем выводить здесь. Для этого создадим отдельный
          элемент и пометим его с помощью атрибута `id`.
      -->
      <div id="viewport"></div>

      <!-- Скрипт отсюда выпиливаем к лешему, ибо ему тут не место. -->

    </div>
  </div>
  <div class="block2" align="center">
    <font size="5px"><b>Step-by-step solution:</b></font>
    <br/>
    <table cellpadding="10" id="Stepping">
      <tr>
        <div id="Step">
          <td>
            <font align="left">Step 1:</font>
          </td>
          <td>
            <textarea style="width:1230px; height:100px;" wrap="hard"></textarea>
          </td>
        </div>
      </tr>
      <tr align="center">
        <td></td>
        <td>
          <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-plus"></span>
                            <!--Duplicate "Step".-->
                        </button>
        </td>
      </tr>
    </table>
  </div>
  <button tupe="button" class="block3 btn-outline-success" align="center" onClick="saveTag(event)">
            <font size="7px"><b>Completed</b></font>
        </button>
  <button tupe="button" class="block5 btn-outline-secondary" align="center">
            <font size="7px"><b>Unresolved</b></font>
        </button>
  <div class="block4" align="center">
    <font size="5px"><b>Tools:</b></font>
    <table cellpadding="10" id="tools">
      <hr>
      <tr id="Semantics">
        <font align="center" size="4px">Semantics:</font>
        </br>
        <button type="button" value='Name Entities' onClick="saveTag(event)">Name Entities</button>
        <button type="button" id='n_1' value='Pronoun' onClick="saveTag(event)">Pronoun</button>
        <button type="button" id='n_2' value='Text' onClick="saveTag(event)">Text</button>
        <button type="button" id='n_3' value='Synonym' onClick="saveTag(event)">Synonym</button>
        <button type="button" id='n_4' value='Term' onCLick="saveTag(event)">Term</button>
        <hr>
      </tr>
      <tr id="Parameters">
        <font align="center" size="4px">Parameters:</font>
        </br>
        <button type="button" id="n_5" value='Parameter' onClick="saveTag(event)">Parameter</button>
        <button type="button" id="n_6" value='Measurement' onClick="saveTag(event)">Measurement</button>
        <hr>
      </tr>
      <tr id="Attributes">
        <font align="center" size="4px">Attributes:</font>
        </br>
        <button type="button" id="n_7" value='Order' onClick="saveTag(event)">Order</button>
        <button type="button" id="n_8" value='Fact' onClick="saveTag(event)">Fact</button>
        <button type="button" id="n_9" value='Associated with' onClick="saveTag(event)">Associated with</button>
        <hr>
      </tr>
      <tr>
        <a href="Specification.html" target="_blank">Specification</a>
      </tr>
    </table>
  </div>
</div>
<hr>
<div id="Savebtn">
  <button type="button">
            <!--Save current state and send to server.-->Save</button>
  <button type="button">
            <!--Cancel current state and clear all textboxes.-->Cancel</button>
</div>
<footer>
  <div class="container">
    <a href="http://sibt.co/2xhZa6M" rel="nofollow noopener" target="_blank">
    </a>
  </div>
</footer>

<!-- К этому моменту документ уже почти завершил свое построение, все нужные элементы
     заняли соответствующие места в структуре DOM.
   Теперь можно описывать необходимую нам логику.
-->
<script type="text/javascript">
    /* Позволю себе изменить имена ваших переменных и функций на более подходящие.
     * Чем ближе по восприятию код к человеческому языку, тем лучше.
     */

    // var tmp = 0;
    // var val = 0;
    /** Переменная tagName будет содержать значение последней нажатой кнопки тега.
     * По умолчания переменная получит значение `undefined`, что значит "значениеине не определено".
     * Нам этого будет достаточно.
     */
    var tagName;

    /* Сохраняем себе элемент, в который будет происходить вывод. */
    var viewport = document.getElementById("viewport")

    // function get(Element) {
    //   tmp_element = Element;
    //   tmp = Element.value;
    // }
    //
    /** Функция-обработчик `saveTag()` сохраняет значение атрибута `value` кнопки в 
     *  переменную `tagName.`
     *   В качестве первого аргумента, в обработчик браузерных событий,
     *   передается объект события. В нашем случае, чтобы получить доступ к елементу,
     *   нужно обратиться к свойству `target` объекта события.
     */
    function saveTag(event){
      var button = event.target
      tagName = button.value
    }

    // function search_tag(item) {
    //   val = item.value;
    //   if (tmp != 0) {
    //     arr[i] = '<input type="submit" name="key" value=' + '<' + tmp + '>' + val + '<' + tmp + '/>' + " onClick='search_tag(this)'" + '>'
    //     ++i;
    //   }
    // }
    //
    /** Функция-обработчик printWord() дописывает к содержимому элемента `#viewport`
     *  строку "<{{tagName}}>{{wordText}}</{{tagName}}>.
     * Где wordText будет являтся значением атрибута `value` елемента, на котором
     *   произошло событие.
     */
    function printWord(event){
      if (!tagName) return;

      var wordText = event.target.value;
      var text = '<' + tagName + '>' + wordText + '</' + tagName + '>'
      viewport.innerText += text
    }

</script>

P.S. Мне показалось, что вы выполняете какое-то учебное задание. Но задачи даже такого, относительного простого, уровня вам сейчас не по плечу. Правда, ваши попытки найти решение, вопреки отсутствию базовых знаний, вселяют оптимизм. Если вы действительно хотите изучить javascript, попробуйте поработать вот с этим ресурсом - https://learn.javascript.ru/. Вам будет очень полезно, если, конечно, текущая задача не последняя работа с javascript в вашей жизни. ;)

С уважением.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.