Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   как запустить addEventListener в зависимости от выбранной радиокнопки (https://javascript.ru/forum/project/70088-kak-zapustit-addeventlistener-v-zavisimosti-ot-vybrannojj-radioknopki.html)

konart 09.08.2017 12:05

как запустить addEventListener в зависимости от выбранной радиокнопки
 
Всем привет!
Помогите с решением!!!
Есть скрипт:
function myFunc (e)                               
{
var evt = window.event || e,                      
    obj = evt.srcElement || evt.target;           
if (obj.tagName == 'TABLE') return;               
while (obj.tagName != 'TD') obj = obj.parentNode; 
obj.className = obj.className ? '' : 'act';       
}
 

onload = function ()
{
var trg = document.getElementById ('myTBL');
if (document.addEventListener) trg.addEventListener ('click', myFunc); 
else if (document.attachEvent) trg.attachEvent ('onclick', myFunc);    
else trg.onclick = myFunc;                                            
}


Есть несколько стилей:
<style>
#myTBL td.act
{
font:14px helvetica, arial, sans-serif;
color : White;
font-weight:800;
background-color:darkGreen;
}
</style>
<style>
#myTBL1 td.act
{
font:14px helvetica, arial, sans-serif;
color : #ccc;
font-weight:800;
background-color:RED;
}
</style>
<style>
#myTBL2 td.act
{
font:14px helvetica, arial, sans-serif;
color : #666;
font-weight:800;
background-color:RED;
}
</style>

Есть таблица в которой всё это должно работать и радиокнопки для назначения стиля который должна принимать ячейка:
<body>


<input type="radio" id="DarkGreen" name="COLOR" value=""
onclick = function() { myTBL; }>
<label for="DarkGreen">DarkGreen</label>
<input type="radio" id="RED" name="COLOR" value=""
onclick = function() { myTBL1; }>
<label for="RED">RED</label>
<input type="radio" id="Orange" name="COLOR" value=""
onclick = function() { myTBL2; }>
<label for="Orange">Orange</label>


<table width="100%" height="100%" id="myTBL" class="select">

<tr>
<td class="oAK" bgcolor="PaleGoldenrod">
AK
</td>
<td class="aKK" bgcolor="#BEBEBE">
KK
</td>
<td class="sKQ" bgcolor="PaleGreen">
KQ
</td>
<td class="sKJ" bgcolor="PaleGreen">
KJ
</td>
<td class="sKT" bgcolor="PaleGreen">
KT
</td>

</tr>
<tr>
<td class="oAQ" bgcolor="PaleGoldenrod">
AQ
</td>
<td class="oKQ" bgcolor="PaleGoldenrod">
KQ
</td>
<td class="aQQ" bgcolor="PaleGoldenrod">
QQ
</td>
<td class="sQJ" bgcolor="PaleGreen">
QJ
</td>
<td class="sQT" bgcolor="PaleGreen">
QT
</td>

</tr>
<tr>
<td class="oAJ" bgcolor="PaleGoldenrod">
AJ
</td>
<td class="oKJ" bgcolor="PaleGoldenrod">
KJ
</td>
<td class="oQJ" bgcolor="PaleGoldenrod">
QJ
</td>
<td class="aJJ" bgcolor="#BEBEBE">
JJ
</td>
<td class="sJT" bgcolor="PaleGreen">
JT
</td>

</tr>

</table>

</body>

Вопрос - КАК СДЕЛАТЬ ЧТОБЫ ОНКЛИК В ФУНКЦИИ ИСПОЛЬЗОВАЛ СТИЛЬ ВЫБРАННЫЙ РАДИОКНОПКОЙ!!!
ПОМОГИТЕ .......

рони 09.08.2017 12:31

konart,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #myTBL td.DarkGreen
 {

 font:14px helvetica, arial, sans-serif;
 color : White;
 font-weight:800;
 background-color:DarkGreen;
 }


 #myTBL td.Red
 {
 font:14px helvetica, arial, sans-serif;
 color : #ccc;
 font-weight:800;
 background-color:Red;
 }

 #myTBL td.Orange
 {
 font:14px helvetica, arial, sans-serif;
 color : #666;
 font-weight:800;
 background-color:Orange;
 }
 td{
   height: 70px;
   position:  relative;
 }

  #myTBL td:hover:after {
    background-color: #D2691E;
    border-radius: 6px;
    padding: 8px;
    opacity: 1;
 }
 td.DarkGreen:after{ opacity:0;
    content: "это  DarkGreen";
    position: absolute;
   left: 70px;
 }
 td.Red:after{ opacity:0;
    content: "это  Red";
    position: absolute;
   left: 70px;
 }
 td.Orange:after{ opacity:0;
   content: "это  Orange";
   position: absolute;
   left: 70px;
 }
  </style>
  <script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
  <script>
   window.addEventListener('DOMContentLoaded', function() {
     var table = document.querySelector('#myTBL'),
         color = document.querySelectorAll('[name="COLOR"]');
     table.addEventListener('click', function() {
     var target = event.target;
        if (target.closest("td")) {
            [].forEach.call( color, function(el) {
                   el.checked && !target.classList.contains(el.id)?  target.classList.add(el.id) : target.classList.remove(el.id);
            });
        }


     });
       });
  </script>
</head>

<body>
<input type="radio" id="DarkGreen" name="COLOR" value=""  checked="checked">
 <label for="DarkGreen">DarkGreen</label>
 <input type="radio" id="Red" name="COLOR" value="" >
 <label for="Red">RED</label>
 <input type="radio" id="Orange" name="COLOR" value="">
 <label for="Orange">Orange</label>


 <table width="100%" height="100%" id="myTBL" class="select">

 <tr>
 <td class="oAK" bgcolor="PaleGoldenrod">
 AK
 </td>
 <td class="aKK" bgcolor="#BEBEBE">
 KK
 </td>
 <td class="sKQ" bgcolor="PaleGreen">
 KQ
 </td>
 <td class="sKJ" bgcolor="PaleGreen">
 KJ
 </td>
 <td class="sKT" bgcolor="PaleGreen">
 KT
 </td>

 </tr>
 <tr>
 <td class="oAQ" bgcolor="PaleGoldenrod">
 AQ
 </td>
 <td class="oKQ" bgcolor="PaleGoldenrod">
 KQ
 </td>
 <td class="aQQ" bgcolor="PaleGoldenrod">
 QQ
 </td>
 <td class="sQJ" bgcolor="PaleGreen">
 QJ
 </td>
 <td class="sQT" bgcolor="PaleGreen">
 QT
 </td>

 </tr>
 <tr>
 <td class="oAJ" bgcolor="PaleGoldenrod">
 AJ
 </td>
 <td class="oKJ" bgcolor="PaleGoldenrod">
 KJ
 </td>
 <td class="oQJ" bgcolor="PaleGoldenrod">
 QJ
 </td>
 <td class="aJJ" bgcolor="#BEBEBE">
 JJ
 </td>
 <td class="sJT" bgcolor="PaleGreen">
 JT
 </td>

 </tr>

 </table>
</body>
</html>

konart 09.08.2017 13:34

:dance:
Большое спасибо!!!
Быстро и без лишних слов!!!!
Весьма благодарен!

konart 09.08.2017 14:01

В развитие темы.
Можно ли на каждый цвет навесить подсказку (title) или что-то в этом роде. То есть чтобы все отмеченные одним цветом имели одну ОБЩУЮ подсказку (подсказка 1), отмеченные другим - другую (подсказка 2) и так далее?

рони 09.08.2017 16:11

Цитата:

Сообщение от konart
отмеченные одним цветом имели одну ОБЩУЮ подсказку

смотрите пост №2 снова ... css :after ... строка 33 и ниже

konart 09.08.2017 17:15

Вы имеете ввиду content: "это Orange"; ??? Я имел ввиду несколько другое. Когда ячейки закрашены то при подведении курсора к "красным" должна появляться подсказка "вы все в красном", при курсоре на ячейках с зелёным цветом - появляется подсказка "вы все зелёные". Контент я вижу, а вот в табличке подсказки не появляются!?

рони 09.08.2017 17:53

konart,
здесь есть надпись при наведении, после клика? если есть то меняйте надписи как вам нужно.

konart 09.08.2017 19:55

Да, всё есть. Моя оплошность, не там смотрел. Ещё раз огромное СПАСИБО!!!

ALEKS177 21.08.2017 17:24

Поля форм не обязательно должны появляться внутри тега . Их можно разместить в любом месте страницы. Информацию из таких полей нельзя передавать на сервер (это возможно только для всей формы целиком), но когда мы делаем поля, которые обрабатывает JavaScript, нам обычно и не нужно передавать информацию из полей через submit.




<p><input type="text" value="abc"> (text)</p>
<p><input type="password" value="abc"> (password)</p>
<p><input type="checkbox" checked> (checkbox)</p>
<p><input type="radio" value="A" name="choice">
<input type="radio" value="B" name="choice" checked>
<input type="radio" value="C" name="choice"> (radio)</p>
<p><input type="file" checked> (file)</p>

konart 26.08.2017 07:40

Всем добрый день.
Здесь же появилась проблемка с которой мне не удаётся справиться, а именно: для красоты я добавил объём и тень в #myTBL и теперь подсказки оказались под закрашиваемой ячейкой. Причём подсказка сверху ячейки которую я закрашиваю первой, но ПОД всеми остальными. Пробовал и разные z-index, не забывал и про особенности с opacity, и то что позиционирование должно быть, но результата так и не добился. Вот коды...

#myTBL td.DarkGreen
 {
 font:14px helvetica, arial, sans-serif;
 color : White;
 font-weight:800;
 background-color:DarkGreen;
background: linear-gradient(180deg, DarkGreen 95%, Black 5%);
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7);
border-radius: 5px 5px; -webkit-border-radius: 5px; 
z-index: 1;
opacity:0.99;
 }

 td{
   height: auto;/*23*/
   position:  relative;
	cursor: url('images/cursor-question.png'), url('images/861313825289482149.png'), pointer;
opacity:0.99;
 }

  #myTBL td:hover:after {
    background-color: Lime;      /*стиль подсказки*/
	 font:14px helvetica, arial, sans-serif;
    color : Black;
	 font-weight:400;
    border-radius: 1px;
    padding: 2px;/*8*/
    opacity: 0.99;/*1*/
	border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
	box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -moz-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7);
z-index: 10; 
   position:  fixed;
 }

 td.DarkGreen:after{ 
 opacity:0;
    content: "ALLIN";
   position: fixed;
   rigth: 50px;
   bottom: 20px;

 }


Часовой пояс GMT +3, время: 01:31.