0

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

Код:

    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html>
<html>
  <head xmlns="http://www.w3.org/1999/xhtml">
    <meta charset="utf-8">
    <title>
   Problem tagging
</title>
    <link href="https://fonts.googleapis.com/css?family=Peralta" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
    <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML"></script>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="Site.css">
  </head>
  <body>

      <div class="wrapper">
        <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
          <div class="container">
            <a class="navbar-brand" href="/edwiseboard/">Edwise Boards</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainMenu" aria-controls="mainMenu" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="mainMenu">
              <ul class="navbar-nav">
              </ul>


                <ul class="navbar-nav ml-auto">
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="userMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Guest
                    </a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userMenu">
                      <a class="dropdown-item" href="/edwiseboard/settings/account/">My account</a>
                      <a class="dropdown-item" href="/edwiseboard/settings/password/">Change password</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="/edwiseboard/logout/">Log out</a>
                    </div>
                  </li>
                </ul>


            </div>
          </div>
        </nav>
    </div>


         <br/>
         <br/>
         <br/>
         <br/>


    <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 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 txt = ''
                                    var index = 0;
                                    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/>
                    <script type="text/javascript">
                        function get(Element){
                            tmp_element = Element;
                            tmp = Element.value;
                            if(tmp != 0){
                                txt = ' <' + tmp + '>' + val + '</' + tmp +'>';
                                $('basefont').text($('basefont').text() + txt);
                                tmp = 0; 
                                val = ''

                            }
                        }

                        function search_tag(item){
                            val = item.value;


                            /*if(tmp != 0){
                                e = document.getElementById('div_1')
                                e.innerhtml += '<' + tmp + '>' + val + '<' + tmp +'/>'
                                //document.div.innerHTML += '<' + tmp + '>' + val + '<' + tmp +'/>'*/
                        }      

                </script>
            <basefont>  </basefont>
            </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" onclick="get(this)"><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" onClick="get(this)"=><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>

    <script src="/edwiseboard/static/js/jquery-3.2.1.min.js.pagespeed.jm.Y8jX7FH_5H.js"></script>
    <script src="/edwiseboard/static/js/popper.min.js+bootstrap.min.js.pagespeed.jc.0Ybfg-hxwN.js"></script><script>eval(mod_pagespeed_$aAtKKBUYL);</script>
    <script>eval(mod_pagespeed_7MmMipt276);</script>

    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-42049022-13"></script>
    <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','UA-42049022-13');</script>
  </body>
</html>

Например кликается на слово (у меня это элемент массива lsц_words), и вот эта кнопка с Тим словом должна стать серой. Потом кликается на слово из одной из групп Semantics, Parameters, Attributes. После того как на кнопку из одной из этих групп кликнули, кнопка со словом должна стать вместо серой , теперь зеленой

3
  • Можете привести код в пример?
    – user218976
    8 авг 2018 в 14:43
  • добавила код, правда он довольно большой 8 авг 2018 в 14:49
  • @user10119078 приведите код в порядок, удалите лишние стили и скрипты, исправьте ошибки/опечатки (типа этой <font size="5px"><b>Tracking:</font></b> )...
    – UModeL
    8 авг 2018 в 16:08

1 ответ 1

1

Для того, чтобы сделать что-либо по клику, нам нужно прописать действие в обработчике. Для кнопок со словом это функция search_tag(), для тэгов - get() (да-да, я их уже запомнил :) ).

Часть 1. Делаем слово серым

Допишем функцию search_tag.

function search_tag(item){
  val = item.value;

  /* По хорошему, изменять цвет было бы правильно назначая css класс. Но
    прикручивать к этому мозгодробительному коду еще и стили совсем не хочу.
    Поэтому будем вешать стили прямо на элемент.
  */
  item.style.backgroundColor = 'gray'; // Теперь кнопка серая

  /* Позже нам понадобиться менять цвет этой кнопки извне, а для этого
    как-то её нужно будет найти. Пометим, что эта кнопка серая.
  */
  item.setAttribute('data-bgcolor', 'gray')

}

Часть 2. Делаем кнопку зеленой

Здесь нам уже нужен обработчик get().

function get(Element){
  tmp_element = Element;
  tmp = Element.value;
  if(tmp != 0){
      txt = ' <' + tmp + '>' + val + '</' + tmp +'>';
      $('basefont').text($('basefont').text() + txt);
      tmp = 0;
      val = ''
  }

  /* Для начала, найдем нашу серую кнопку-слово. */
  var wordButton = document.querySelector('input[type=submit][name=key][data-bgcolor=gray]')

  if (wordButton){ // Убеждаемся, что серая кнопка найдена
    /* Заменить цвет мы уже умеем. И пометку тоже сделаем,
      на всякий случай.
    */
    wordButton.style.backgroundColor = 'green';
    wordButton.setAttribute('data-bgcolor', 'green');
  }
}

Часть 3. Вангую

Поскольку я уже начинаю представлять логику вашего кода, осмелюсь предположить, что выделять серым одновременно несколько слов-кнопок нельзя. Чтобы этого избежать, функцию search_tag() придется улучшить.

function search_tag(item){
  val = item.value;

  /* Снимаем выделение со всех серых кнопок. */
  var grayButtons = document.querySelectorAll('input[type=submit][name=key][data-bgcolor=gray]');
  for (var i=0; i<grayButtons.length; i++){
    grayButtons[i].style.backgroundColor = null;
    grayButtons[i].removeAttribute('data-bgcolor');
  }

  item.style.backgroundColor = 'gray';
  item.setAttribute('data-bgcolor', 'gray')

}

P.S. Ваше упорство делает вам честь. ;) Если не трудно, поделитесь ссылкой на сайт, с которого была выпилена разметка. А если еще исходную постановку задачи дадите, буду крайне признателен. Я в вас верю, жду продолжения сериала. :)

3
  • Когда сайт будет доделан, обязательно скину ссылку)) Пока еще только все в процессе. А задача такая, чтобы можно было выбирать слова, и оборачивать их в теги. Причем текст, который показывает обернутые слова^ печатается динамически. Сейчас работаю над тем, чтобы можно было несколько слов сразу выбрать, нажимая на них, а потом нажав на один тег, все выбранные слова оборачивались в выбранный тег. 14 авг 2018 в 14:02
  • С каждым уточнением ТЗ все больше хочется набросать вам рекомендаций по реорганизации кода и приведению его в божеский вид, но так вы нить собственных размышлений потеряете. Так что дерзайте, задавайте конкретные вопросы в затычных местах, а мы постараемся, по мере сил, вам помочь
    – Spomni
    14 авг 2018 в 19:58
  • спасибо большое)) 15 авг 2018 в 9:43

Ваш ответ

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

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