JackShcherbakov
@JackShcherbakov

Почему не работает скрипт?

Решил поупражняться, написать что-то типо детской игры, мол, выбери цвет нажимай на квадратик и тот будет закрашиваться. Задача, казалось бы ну просто элементарная, но все-таки нет, где-то что-то не так. Всем спасибо за ответы.
<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Editor</title>
<script src="Learn JavaScript/Примеры/js/jquery-3.2.1.min.js"></script>
<script>
	$(document).ready(function(){
		$('#colors div').click(function(){
			var color = $(this).attr('class');
		});
		$('table').on('click', 'td', function(){
				$(this).toggleClass(color);
		});
	});
</script>
<style>
table{
	width:350px;
	height:200px;
	margin:0 auto;
}
td{
	border-collapse:collapse;
	border:2px black solid;
	border-radius:5px;
	cursor:pointer;
}
.blue{
	background-color:#FF99FF;
}
#colors{
	margin:0 auto;
	margin-top:30px;
	width:203px;
}
#colors > div{
	width:50px;
	height:50px;
	border-radius:10px;
	display:inline-block;
	margin-right:15px;
	cursor:pointer;
}
.blue{
	background-color:#FFCCFF;
}
.red{
	background-color:red;
}
.yellow{
	background-color:yellow;
}
</style>
</head>

<body>
	<table>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
	<div id="colors">
		<div class="red"></div>
		<div class="blue"></div>
		<div class="yellow"></div>
	</div>
</body>

</html>
  • Вопрос задан
  • 186 просмотров
Решения вопроса 3
@petelinmn
Программист
У меня заработало сразу как только вынес переменную color выше

$(document).ready(function(){
var color;
    $('#colors div').click(function(){
      color = $(this).attr('class');
    });
    $('table').on('click', 'td', function(){
        $(this).toggleClass(color);
    });
  });


Вообще Ctrl+J жми в хроме. Там консоль и ошибки пишутся
Ответ написан
link_web
@link_web
Magento, Laravel, Zend, Shopify, Prestashop, WP
комменты оставил : https://jsfiddle.net/fmLvsjc9/
Ответ написан
Комментировать
nepritimov_m
@nepritimov_m
Frontend dev.
Все из-за области видимости.
Функция, которая отвечает за окраску таблицы, не в курсе о переменной color.
Либо использовать глобальные переменные, т.е выносить переменную color на уровень выше, либо передавать контекст в функцию окраски.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы