<!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.... |
function foo(){
document.querySelectorAll('.test1,.test2').forEach(function(item){
item.style.backgroundColor='yellow';
});
}
|
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);
};
|
а извините сам вопрос то в том, чтоб сложить все выбранные суммы?
|
Александр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');
- неправильно, т.к эти атрибуты в опциях в разных элементах.Почитайте уже книжки наконец! |
Dilettante_Pro,
Может быть все же на примере покажите?, а книжки я непременно почитаю :) |
Nexus,
Dilettante_Pro, laimas, рони, Omnia, помогите с данным решением?. |
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);
});
|
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>
|
Dilettante_Pro, код вопрошающего работал, я заюзал его.
В вашей реализации от переменной total можно вовсе отказаться. |
| Часовой пояс GMT +3, время: 07:25. |