eventlistener that makes a tag with a value

Admin 1
Viewed 86

So I am doing a school assignment where im tasked to write an event listener that makes a tag for a value. and show as a Html (but should it just show up in the console or what is meant by HTML?)

and also add a button to it which removes the tag

This is what I have:

const textInput = document.querySelector("input");

function callAfterAKeyIsReleased(event) {
  console.log("<div>", "Number" + event.target.value, "</div>");
};

textInput.addEventListener("keyup", callAfterAKeyIsReleased);
<main class="container content dynamic">
  <input type="number" value="0" min="0" max="20" />

  <div class="dynamic-divs"></div>

  <button class="reset" type="button">Reset</button>
</main>

but I am 100% sure that is a cheat though

html javascript
2 Answers

I would recommend having some sort of debounce if your intending to use keyup. But here is an example of how you would do it;

document.addEventListener("keyup", (event) => {
  const inputValue = document.querySelector("input").value;
  const listItem = document.createElement("div"); // is a node
  listItem.innerHTML = inputValue;
  document.getElementsByClassName("dynamic-divs")[0].appendChild(listItem);
});

Also here is the reset functionality;

document.querySelector(".reset").addEventListener("click", () => {
  document.getElementsByClassName("dynamic-divs")[0].innerHTML = "";
});

Edited: Here is the looping function;

document.addEventListener("keyup", (event) => {
  const inputValue = document.querySelector("input").value;
  document.getElementsByClassName("dynamic-divs")[0].innerHTML = "";

  for (var i = 1; i <= parseInt(inputValue); i++) {
    const listItem = document.createElement("div"); // is a node
    listItem.innerHTML = `Number: ${i}`;
    document.getElementsByClassName("dynamic-divs")[0].appendChild(listItem);
  }
});
user_22443830

HTML:

<div class="row d-flext justify-content-center">
    <div class="col-md-4">
        <input type="number" min="1" class="form-control" id="value-control" />
    </div>
    <div class="col-md-4">
        <button class="btn-primary" id="resetBtn">Reset</button>
    </div>
</div>

<div id="dynamic-row"></div>

Vanilla JS:

const resetBtn = document.querySelector('#resetBtn');
const inputField = document.querySelector('#value-control');

resetBtn.addEventListener("click", function() {
    document.getElementById("dynamic-row").innerHTML = "";
    document.getElementById("value-control").value = "";
});

inputField.addEventListener("change", function() {
    document.getElementById("dynamic-row").innerHTML = "";

    var amount = this.value;
    var displayNumber = 0;

    if(amount > 0) {
        for(var i = 0; i < amount; i++) {
            displayNumber++;
            document.getElementById("dynamic-row").innerHTML += '<div class="row d-flext justify-content-center"><div class="col-md-10 dynamic-col">'+displayNumber+'</div><div class="col-md-2"><button class="btn-danger removeBtn" onclick="removeElement(this);">Remove</button></div></div>';
        }
    } else {
        document.getElementById("dynamic-row").innerHTML = "";
        document.getElementById("value-control").value = "";
    }
});

 function removeElement(e) {
    var thisClass = e.className;

    if(e.classList.contains('removeBtn')) {
        e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);

        var amount = document.querySelectorAll('.dynamic-col').length;
        document.getElementById("value-control").value = amount;

        var counter = 0;
        document.querySelectorAll('.dynamic-col').forEach(function(e) {
            counter++;
            e.innerHTML = counter;
        });
     }
 }

Vanilla JS Codepen Example here.

jQuery:

$('#resetBtn').on("click", function() {
    $('#dynamic-row').html("");
    $('#value-control').val("");
});

$('#value-control').on("change keyup", function() {
    $('#dynamic-row').html("");

    var amount = parseInt($(this).val());
    var displayNumber = 0;

    if(amount > 0) {
        for(var i = 0; i < amount; i++) {
            displayNumber++;
            $('#dynamic-row').append('<div class="row d-flext justify-content-center"><div class="col-md-10 dynamic-col">'+displayNumber+'</div><div class="col-md-2"><button class="btn-danger removeBtn">Remove</button></div></div>');
        }
    } else {
        $('#dynamic-row').html("");
        $('#value-control').val("");
    }
});

$(document).on("click", "button.removeBtn", function() {
    $(this).parent().parent().remove();

    var amount = $('.dynamic-col').length;
    $('#value-control').val(amount);

    var counter = 0;
    $('.dynamic-col').each(function () {
        counter++;
        $(this).html(counter);
    });
});

jQuery Codepen Example here.

I'm aware that you said that you'd want a Vanilla JS example, but I threw in a jQuery example as well. I personally really like jQuery, because it simplifies a lot of things. The Vanilla JS code versus the jQuery code in this particular topic is quite the difference in terms of simplicity...

user_75350140
Related