Как можно сделать так, чтобы при клике на кнопку она становилась серого цвета, а при клике на другою кнопку первая - становилась зеленая?
Код:
<?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. После того как на кнопку из одной из этих групп кликнули, кнопка со словом должна стать вместо серой , теперь зеленой
<font size="5px"><b>Tracking:</font></b>
)...