Fill list from an input

Asked

Viewed 694 times

-4

I have a input that after being filled and pressed Enter, she creates a list with checkbox's. The problem is that when it is populated again, it edits the already created list item and I want to create a new item, not edit the previous one.

I want to get the list filled in with the input, create several li's and not just one and keep editing/overwriting it. How can I do this?

// verifica se a tecla apertada é o enter

function OnEnter(evt) {
    var key_code = evt.keyCode ? evt.keyCode :
    evt.charCode ? evt.charCode :
    evt.which ? evt.which : void 0;

    if (key_code == 13) {
        return true;
    }
}
var j = 1;

function recarrega(e) {
    if(OnEnter(e))
    {
        var p = document.getElementById('Foo');
        var filhos = p.childNodes;
        for (i = filhos.length - 1; i >= 0; i--) {
            if (filhos[i].tagName == 'LI') {
                p.removeChild(filhos[i]);
            }
        }

        var tarefa = document.getElementById("my_span").value;

        document.getElementById("my_span").value = "";

        var li = document.createElement('li');
        p.appendChild(li);
        li.id = 'my_span'+ j;
        li.innerHTML = "<input type='checkbox' id='ckb" + j + "' value='" + j + "' onclick='my_fun(" + j + ");'>" + tarefa;

        j++;

        return false;
    }
    else
    {
        return true;
    }
}

// quando marco o checkbox ele risca a string da li

function my_fun(j) {
    var chkbox = "ckb" + j;
    var my_span = "my_span" + j;
    var msg = chkbox + " " + my_span;
    if ($("#ckb"+ j).is(':checked')) {
        document.getElementById(my_span).style.textDecoration = 'line-through';
    } else {
        document.getElementById(my_span).style.textDecoration = 'none';
    }
}

<form>
    <label for="ctarefa">Tarefas:</label>
    <input onkeypress="return recarrega(event);" type="text" id='my_span'/><br />
    <div class="boxLista">
        <ul id="Foo">

        </ul>
    </div>
</form>
javascript html input
  • 3

    Welcome to Stack Overflow in English! Welcome to [en.so]. Your question is very broad, the standard of the community are objective questions and have at least one correct answer, as can be seen in the [help] link [Ask]. This question of yours, in addition to being very broad, may give rise to questions. Take a [tour] tour and then you can [Dit] your question so we can help you.

  • 5

    Come on. Before trying to understand your problem I’ll give you some tips: 1. Almost all the content of the site is someone who needs helping, soon put help/help/help and the like in the title is something extremely redundant. 2. We know by tags which language or technology you need help with, so it is also redundant to put this in the question title (save rare exceptions). 3. The title should be a (very) brief description of your problem, something that gives you an "idea" of what you need. 4. Take the time to write your question, explain your problem in a way that [+]

  • 4

    [+] someone who doesn’t know anything about your project can help you. See [Ask], how to create a minimum, complete and verifiable example and visit [tour], this will help you (and a lot). You can edit your question at any time by clicking on [Edit]. By the way, welcome to [pt.so].

  • What do you mean, "and keep editing the same"? What’s missing from the code you have? You can describe better what you can’t get to work?

  • whenever you fill in the input and give enter creates a <li> with the value filled in and clears the input, when I fill in again I would like to create another <li> with the new entry but my code edits the previous <li>

  • Marcio, you need to [Edit] your question for it to be voted for reopening. Please check out the jbueno tips, are important.

  • I gave an improved explanation I believe I can already understand the part where I’m struggling

Show 2 more comments

1 answer

1

I solved the problems and improved the code

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
function OnEnter(evt) {

    var key_code = evt.keyCode ? evt.keyCode :

    evt.charCode ? evt.charCode :

    evt.which ? evt.which : void 0;

    if (key_code == 13) {
        return true;
    }
}

var j = 1;

function recarrega(e) {

    if(OnEnter(e))
    {

        var p = document.getElementById('Foo');

        var filhos = p.childNodes;

        for (i = filhos.length - 1; i >= 0; i--) {

            if (filhos[i].tagName == 'LI') {
                p.appendChild(filhos[i]);
            }
        }

        var tarefa = document.getElementById("my_span").value;

        document.getElementById("my_span").value = "";

        var li = document.createElement('li');

        var label = " <label for='ckb" + j + "' id='lbl"+j+"'>"+tarefa+"</label>"
        p.appendChild(li);
        li.setAttribute("ondblclick","HabilitaInput("+j+")")
        li.id = 'my_span'+ j;
        li.innerHTML = "<input type='checkbox' id='ckb" + j + "' value='" + j + "' onclick='my_fun(" + j + ");'>"+"<input type='text' id='input" + j + "' value='" + tarefa + "' style='display: none' onkeypress='return atualizaTarefa(this,"+j+",event);'>"  + label;


        j++;

        return false;
    }
    else
    {
        return true;
    }
}

// quando marco o checkbox ele risca a string da li

function my_fun(j) {

    var chkbox = "ckb" + j;

    var my_span = "my_span" + j;

    var msg = chkbox + " " + my_span;

    if ($("#ckb"+ j).is(':checked')) {
        document.getElementById(my_span).style.textDecoration = 'line-through';
    } 

else {
        document.getElementById(my_span).style.textDecoration = 'none';
    }
}
function HabilitaInput(index){

    var idInput = "input"+index;
    document.getElementById(idInput).style.display = 'block';
    document.getElementById(idInput).focus();
}
function atualizaTarefa(element,index,e){
    if(OnEnter(e)){
        var newtarefa = element.value;
        var idInput = "input"+index;
        var idLbl = "lbl"+index;
        document.getElementById(idLbl).innerHTML =newtarefa; 
        document.getElementById(idInput).style.display = 'none';
    }
}
        </script>
    </head>
    <body>
        <form>

            <label for="ctarefa">Tarefas:</label>

            <input onkeypress="return recarrega(event);" type="text" id='my_span'/><br />

            <div class="boxLista">

                <ul id="Foo">

                </ul>
            </div>
        </form>
    </body>
</html>

  • If you could say what problems you solved, the answer would gain a lot

Browser other questions tagged javascript html input

You are not signed in. Login or sign up in order to post.