Fill list from an input

Question

Fill list from an input

Navigation

#1 by (1 votes)

-4

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

I want to make the list populated with input , create multiple 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

asked by anonymous 18.11.2015 / 16:52

1 answer

Why use session_cache_limiter () [closed] How do I upload the image and delete the old one?

score 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>functionOnEnter(evt){varkey_code=evt.keyCode?evt.keyCode:evt.charCode?evt.charCode:evt.which?evt.which:void0;if(key_code==13){returntrue;}}varj=1;functionrecarrega(e){if(OnEnter(e)){varp=document.getElementById('Foo');varfilhos=p.childNodes;for(i=filhos.length-1;i>=0;i--){if(filhos[i].tagName=='LI'){p.appendChild(filhos[i]);}}vartarefa=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>