Форум

olegan4eg88 · #1 (**permalink**) 30.12.2018, 17:01

Добрый день всех с наступающим! Помогите решить задачу, а именно создать условие, сейчас при нажатии на Текст 1 он у нас увеличивается и окрашивается, также нужно сделать и для Текст 2. Но если один из span у нас уже увеличен, то при нажатии на следующий, предыдущий должен принять исходное значение. Таких span будет около сотни.

<span id="big">Текст 1.</span><br>
<span id="big">Текст 2.</span><br>

var span = document.querySelector('#big');
	span.onclick = function(){
		    span.style.fontSize = '13pt';
            span.style.fontWeight = 'bold';
            span.style.background = '#D9FFAD';
	}

рони · #2 (**permalink**) 30.12.2018, 17:37

olegan4eg88,
id уникально, используйте класс.

Nexus · #3 (**permalink**) 30.12.2018, 17:42

ID - уникальный идентификатор.

<div class="spans-container">
<span>Текст 1.</span><br>
<span>Текст 2.</span><br>
</div>
<style>.spans-container span.highlighted{font-size:13pt;font-weight:bold;background:#D9FFAD;}</style>
<script>
const container = document.querySelector('.spans-container');
const activeClass = 'highlighted';

container.addEventListener('click', function(e) {
    const target = e.target;
    if (!target || target.tagName.toLowerCase() !== 'span')
        return;

    if (target.classList.contains(activeClass))
        return void target.classList.remove(activeClass);

    const activeElement = container.querySelector('.' + activeClass);
    if (activeElement)
        activeElement.classList.remove(activeClass);

    target.classList.add(activeClass);
});
</script>

рони · #4 (**permalink**) 30.12.2018, 17:57

Nexus,

<!DOCTYPE html>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .big.up {
            font-size: 13pt;
            background-color: #D9FFAD;
            font-weight: bold;
        }
    </style>

    <script>
        addEventListener("click", function (e) {
                var target = e.target;
                if (target && target.classList.contains("big")) {
                    var up = document.querySelector('.up');
                    if (up && up != target) up.classList.remove("up");
                    target.classList.toggle("up")
                }
            }

        );
    </script>
</head>

<body>
    <span class="big">Текст 1.</span><br>
    <span class="big">Текст 2.</span><br>
    <span class="big">Текст 1.</span><br>
    <span class="big">Текст 2.</span><br>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript