2

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">

</head>
<body>
<div class="container">
    <div class="assessment">
        <button id="positive" onclick="changeState()">Positive</button>
        <button id="negative" onclick="changeState()">Negative</button>
        <button id="neutral" onclick="changeState()">Neutral</button>
    </div>

    <div id="content">
    </div>

</div>

<script src="index.js"></script>

</body>
</html>

index.js

var content = document.querySelector('#content');
var positive = document.querySelector('#positive');
var negative = document.querySelector('#negative');
var neutral = document.querySelector('#neutral');

function changeState() {
    positive.addEventListener('click', function () {
        if(content.textContent != null){
            content.removeChild(content.firstChild);
        }
        var choice = document.createElement('p');
        var choiceText = document.createTextNode('Positive choice');
        choice.appendChild(choiceText);
      document.getElementById("content").appendChild(choice);
    });
    negative.addEventListener('click', function () {
        if(content.textContent != null){
            content.removeChild(content.firstChild);
        }
        var choice = document.createElement('p');
        choice.textContent = 'Negative choice';
        content.appendChild(choice);
    });
    neutral.addEventListener('click', function () {
        if(content.textContent != null){
            content.removeChild(content.firstChild);
        }
        var choice = document.createElement('p');
        choice.textContent = 'Neutral choice';
        content.appendChild(choice);
    });
}

1 ответ 1

2

Потому-что в первый раз, вы объявляете функцию которая добавляет события клика,а во второй раз, они уже отрабатывают. нужно функцию вызвать сначала) 1. Объявление функции. 2. Вызов функции. 3. Добавление событий к элементам внутри функции. 4. Клик по кнопке и получение желаемого результата.

var content = document.querySelector('#content');
var positive = document.querySelector('#positive');
var negative = document.querySelector('#negative');
var neutral = document.querySelector('#neutral');

function changeState() {
    positive.addEventListener('click', function () {
        if(content.textContent != null){
            content.removeChild(content.firstChild);
        }
        var choice = document.createElement('p');
        var choiceText = document.createTextNode('Positive choice');
        choice.appendChild(choiceText);
      document.getElementById("content").appendChild(choice);
    });
    negative.addEventListener('click', function () {
        if(content.textContent != null){
            content.removeChild(content.firstChild);
        }
        var choice = document.createElement('p');
        choice.textContent = 'Negative choice';
        content.appendChild(choice);
    });
    neutral.addEventListener('click', function () {
        if(content.textContent != null){
            content.removeChild(content.firstChild);
        }
        var choice = document.createElement('p');
        choice.textContent = 'Neutral choice';
        content.appendChild(choice);
    });
}
changeState()
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">

</head>
<body>
<div class="container">
    <div class="assessment">
        <button id="positive">Positive</button>
        <button id="negative">Negative</button>
        <button id="neutral">Neutral</button>
    </div>

    <div id="content">
    </div>

</div>

<script src="index.js"></script>

</body>
</html>

6
  • и не забудьте убрать все onclick="changeState()"
    – user176262
    1 фев 2019 в 1:34
  • @Igor да,точно.) отредактирую,чтоб не запуталась.
    – EVG
    1 фев 2019 в 1:37
  • Поздравляю с первой тысячей!
    – user176262
    1 фев 2019 в 1:39
  • @Igor благодарю))). Медленно но упорно)
    – EVG
    1 фев 2019 в 1:42
  • Спасибо большое! 4 фев 2019 в 16:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.