18.10.2017, 17:42
|
 |
Аспирант
|
|
Регистрация: 06.03.2017
Сообщений: 93
|
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
</head>
<body>
<div class="test">
<p class="test1">Абзац1.</p>
<p class="test2">Абзац2.</p>
</div>
<button onclick="foo()">Выделить цветом абзац</button>
</body>
</html>
function foo() {
var matches = document.querySelector(".test1");
matches.style.backgroundColor = "yellow";
}
</script>
Dilettante_Pro,
Подскажите еще такой момент,
var matches = document.querySelector(".test1 .text2"); в этой строке необходимо взять класс с двух абзацев, по умолчанию берет только первый, как сделать так чтоб захватывал оба, объединенный div с классом test исключается, так как взамен абзацев буду использовать select.... |
|
18.10.2017, 17:46
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,736
|
|
function foo(){
document.querySelectorAll('.test1,.test2').forEach(function(item){
item.style.backgroundColor='yellow';
});
}
|
|
18.10.2017, 18:26
|
|
Аспирант
|
|
Регистрация: 06.03.2017
Сообщений: 93
|
|
Nexus,
спасибо за предыдущий ответ, подскажите на примере вот этого?
<select class="proso1" width="100%" id="proso_engine" name="enginephp">
<option value="0" title="" price-engine="0">по умолчанию</option>
<option value="100" value-url="ссылка" title="" price-engine="100" product="engine №1">engine №1 - 100 руб.</option>
<option value="200" value-url="ссылка" title="" price-engine="200" product="engine №2">engine №2 - 200 руб.</option>
</select>
<select class="proso1" width="100%" id="proso_table" name="tablephp">
<option value="0" title="" price-table="0">по умолчанию</option>
<option value="10" value-url="ссылка" title="" price-table="10">table №1 - 10 руб.</option>
<option value="20" value-url="ссылка" title="" price-table="20">table №2 - 20 руб.</option>
</select>
<div class="form_itog_01" id="result_02"></div>
document.querySelector('.proso1, .proso1').onchange = function() {
var head_itog = '1000';
var table_itog = this.options[this.selectedIndex].getAttribute('price-table');
var engine_itog = this.options[this.selectedIndex].getAttribute('price-engine');
result_02.innerText = Number(head_itog) + Number(engine_itog) + Number(table_itog);
};
|
|
18.10.2017, 18:30
|
|
Аспирант
|
|
Регистрация: 06.03.2017
Сообщений: 93
|
|
|
а извините сам вопрос то в том, чтоб сложить все выбранные суммы?
|
|
18.10.2017, 19:12
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Александр83,
Перечень ошибок:
1. document.querySelector выбирает один первый попавшийся элемент.
2. '.proso1, .proso1' - зачем 2 раза один и тот же класс? Не поможет. См. ошибку 1 и пост 52 от Nexus.
3. this в обработчике - это конкретный элемент, на котором произошло событие.
var table_itog = this.options[this.selectedIndex].getAttribute('price-table');
var engine_itog = this.options[this.selectedIndex].getAttribute('price-engine');
- неправильно, т.к эти атрибуты в опциях в разных элементах.
Почитайте уже книжки наконец!
|
|
19.10.2017, 05:18
|
|
Аспирант
|
|
Регистрация: 06.03.2017
Сообщений: 93
|
|
Dilettante_Pro,
Может быть все же на примере покажите?, а книжки я непременно почитаю 
|
|
19.10.2017, 06:06
|
|
Аспирант
|
|
Регистрация: 06.03.2017
Сообщений: 93
|
|
|
Nexus,
Dilettante_Pro,
laimas,
рони,
Omnia, помогите с данным решением?.
|
|
19.10.2017, 09:38
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,736
|
|
https://jsfiddle.net/ayufwL17/
var engine=document.getElementById('proso_engine'),
table=document.getElementById('proso_table');
[engine,table].forEach(function(item){
item.addEventListener('change',function(){
var total=1000;
total+=+table.options[table.selectedIndex].getAttribute('price-table');
total+=+engine.options[engine.selectedIndex].getAttribute('price-engine');
document.getElementById('result_02').innerHTML=total;
},false);
});
|
|
19.10.2017, 10:35
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Nexus,
Вариант попроще - без танцев с бубном вокруг option
<select class="proso1" width="100%" id="proso_engine" name="enginephp">
<option value="0" title="" price-engine="0" selected>по умолчанию</option>
<option value="100" value-url="ссылка" title="" price-engine="100" product="engine №1">engine №1 - 100 руб.</option>
<option value="200" value-url="ссылка" title="" price-engine="200" product="engine №2">engine №2 - 200 руб.</option>
</select>
<select class="proso1" width="100%" id="proso_table" name="tablephp">
<option value="0" title="" price-table="0" selected>по умолчанию</option>
<option value="10" value-url="ссылка" title="" price-table="10">table №1 - 10 руб.</option>
<option value="20" value-url="ссылка" title="" price-table="20">table №2 - 20 руб.</option>
</select>
<div class="form_itog_01" id="result_02"></div>
<script>
var engine=document.getElementById('proso_engine'),
table=document.getElementById('proso_table');
[engine,table].forEach(function(item){
item.addEventListener('change',function(){
var total=1000;
total+=+table.value;
total+=+engine.value;
document.getElementById('result_02').innerHTML=total;
},false);
});
</script>
|
|
19.10.2017, 10:43
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,736
|
|
|
Dilettante_Pro, код вопрошающего работал, я заюзал его.
В вашей реализации от переменной total можно вовсе отказаться.
|
|
|
|
