Solution 1 :

There were a few issues:

A common problem people run into with the button tag is by default, it has a type of ‘submit’ which will submit the form. There are a few ways to disable this, my preferred method is to set the type as button.

Another issue is you don’t have any content in the select box, which was causing an error trying to get the value of a select box with no options that can be selected.

I updated your radios, to use querySelectorAll and look for :checked that way you don’t need to create an if statement.

I also removed the paragraphArray from addParagraph() since it is a global variable.

<html>
    <head>
        <title>Promemoria esercizi</title>
    </head>
    <body>
        <ul id="paragraphList">
        </ul>
        <form id="paragraphForm">
          <br></br>
            <textarea id="insertParagraph" rows="5" cols="100"></textarea>
            <label>Inserisci il paragrafo:
                <input type="radio" id="insertType" name="InsertType" value="last">In fondo
                <input type="radio" id="insertType" name="InsertType" value="before">Dietro il paragrafo
                <select id="beforeParagraph"></select><br></br>
            </label>
              <button type="button" id="add" onclick="addParagraph()">Inserisci</button><br></br>
        </form>
        <script>
            var paragraphArray = [];
            document.getElementById("paragraphList").innerHTML = paragraphArray;
            function addParagraph(){
                var text = document.getElementById("insertParagraph").value;
                var radio = document.querySelectorAll("#insertType:checked");
                var selectedInsertType = "";
                var ul = document.getElementById("paragraphList");
                var sel = document.querySelector("#beforeParagraph");
                var selectedBeforeParagraph = (sel.selectedIndex > -1) ? sel.options[sel.selectedIndex].value : "";
                for(i = 0; i < radio.length; i++){
                   selectedInsertType = radio[i].value;
                }
                if(selectedInsertType = "last"){
                    paragraphArray.push(text);
                }else if(selectedInsertType = "before"){
                    paragraphArray.splice((selectedBeforeParagraph-1), 0, text);
                }
                var newChoice = document.createElement("option");
                newChoice.value = paragraphArray.length.toString();
                newChoice.text = paragraphArray.length.toString();
                for(i = 0; i < paragraphArray.length; i++){
                    var li = document.createElement("li");
                    li.innerHTML = paragraphArray[i];
                }
                document.getElementById("paragraphList").innerHTML = paragraphArray;
            }
        </script>
    </body>
</html>

Problem :

I’m trying to code a small application that lets you dynamically add text strings in an unordered list, but the problem is the strings I pass as input do not show up after clicking the “Invia/Send” button. I have tried with a few solutions from other questions, but none of them worked. Any ideas?

<html>
    <head>
        <title>Promemoria esercizi</title>
    </head>
    <body>
        <ul id="paragraphList">
        </ul>
        <form id="paragraphForm">
          <br></br>
            <textarea id="insertParagraph" rows="5" cols="100"></textarea>
            <label>Inserisci il paragrafo:
                <input type="radio" id="insertType" name="InsertType" value="last">In fondo
                <input type="radio" id="insertType" name="InsertType" value="before">Dietro il paragrafo
                <select id="beforeParagraph"></select><br></br>
            </label>
              <button id="add" onclick="addParagraph(paragraphArray)">Inserisci</button><br></br>
        </form>
        <script>
            var paragraphArray = [];
            document.getElementById("paragraphList").innerHTML = paragraphArray;
            function addParagraph(paragraphArray){
                var text = document.getElementById("insertParagraph").value;
                var radio = document.getElementById("insertType");
                var selectedInsertType = "";
                var ul = document.getElementById("paragraphList");
                var sel = document.getElementById("beforeParagraph");
                var selectedBeforeParagraph = sel.options[sel.selectedIndex].value;
                for(i = 0; i < radio.length; i++){
                    if(radio[i].checked){
                        selectedInsertType = radio[i].value;
                    }
                }
                if(selectedInsertType = "last"){
                    paragraphArray.push(text);
                }else if(selectedInsertType = "before"){
                    paragraphArray.splice((selectedBeforeParagraph-1), 0, text);
                }
                var newChoice = document.createElement("option");
                newChoice.value = paragraphArray.length.toString();
                newChoice.text = paragraphArray.length.toString();
                for(i = 0; i < paragraphArray.length; i++){
                    var li = document.createElement("li");
                    li.innerHTML = paragraphArray[i];
                }
                document.getElementById("paragraphList").innerHTML = paragraphArray;
            }
        </script>
    </body>
</html>

Comments

Comment posted by Nicholas Marsicano

Thanks for the answer, now the code works as intended. However, I still don’t know how you managed to make the script fire and execute properly, I’ve tried using your button solution on other scripts I’m making and yet they still don’t work. I’ve asked another question as a result.

By