settingsAccountsettings
Menusettings

Q: Increment Counter (task with DOM and jQuery)

+3 votes

You are tasked with creating a piece of HTML dynamically using JavaScript and appending it to a given element using a passed in selector.

HTML and JavaScript Code - You are given the following HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Increment Counter</title>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"
            integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
            crossorigin="anonymous"></script>
</head>
<body>
    <div id="wrapper">
    </div>
    <script src="incrementCounter.js"></script>
    <script>
        window.onload = function(){
            increment("#wrapper");
        }
    </script>
</body>
</html>

Your function will receive a string value representing a selector (for example "#wrapper" or ".root"), all elements created should be appended to the selector.  

The HTML you create should contain 4 elements:

  • <textarea> with class="counter", value="0" and the disabled attribute.
  • <button> with class="btn", id="incrementBtn" and text "Increment".
  • <button> with class="btn", id="addBtn" and text "Add".
  • Unordered list <ul> with class="results".

When the [Increment] is clicked the value of the textarea should go up by one (if it was 0 it should become 1 e.t.c.). When the [Add] is clicked a new list item (<li>) with text equal to the current value of the textarea should be added to the unordered list.

Example:

increment counter jquery

asked in JavaScript category by user mitko

1 Answer

+1 vote

Start off by creating the needed elements and parsing the selector, we can do it easily with jQuery.

Adding multiple elements to the DOM can be expensive, instead of repeatedly adding to the DOM we can create a DocumentFragment and add the elements to it instead. When we have built our hierarchy we can append the DocumentFragment to the DOM, which will add all of the fragment’s elements to the specified selector.

The next step is to add values, and attributes to the elements and events to the buttons. The last step is to add our elements to the DOM.

The solution:

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <!--<script src="src/jquery-3.2.1.min.js"></script>-->
</head>
<body>
<div id="wrapper">
</div>
<script src="incrementCounter.js"></script>
<script>
    window.onload = function () {
        increment("#wrapper");
    }
</script>
</body>
</html>

JavaScript code with the jQuery inside:

function increment(selector) {
    let container = $(selector);
    let fragment = document.createDocumentFragment();
    let textArea = $('<textarea>');
    let incrementBtn = $('<button>Increment</button>');
    let addBtn = $('<button>Add</button>');
    let list = $('<ul>');
    //textarea
    textArea.val(0);
    textArea.addClass('counter');
    textArea.attr('disabled', true);
    //buttons
    incrementBtn.addClass('btn');
    incrementBtn.attr('id', 'incrementBtn');
    addBtn.addClass('btn');
    addBtn.attr('id', 'addBtn');
    //list
    list.addClass('results');
    //events
    $(incrementBtn).on('click', function () {
        textArea.val(+textArea.val() + 1)
    });
    $(addBtn).on('click', function () {
        let li = $(`<li>${textArea.val()}</li>`);
        li.appendTo(list);
    });
    textArea.appendTo(fragment);
    incrementBtn.appendTo(fragment);
    addBtn.appendTo(fragment);
    list.appendTo(fragment);
    container.append(fragment);
}

 

answered by user nikole
...