Reading values out of an input box html-CodePudding

Here is my code

<!DOCTYPE html>
<html>
<body>
    <h1 style="text-align: center;">Your Page</h1>
    <p id="Paragraph"></p>
    <form style="display: block;"><label for="Name" id="name" >Name: <input type="text" required></label></form>
    <form style="display: block;"><label for="Category" id="category">Category: <input type="text" required ></label></form>
    <button type="button" id="New_Field" style="font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif; height: 50px ;background-color: rgb(24, 255, 24); width: 100px; color: black;">New Page</button>
    <button type="button" id="Generate">Generate</button>
    <form style="display: block;"><label for="FIELD_1" id="FIELD_1"><input type="text"></label></form>
    <form style="display: block;"><label for="VALUE_1" id="VALUE_1"><input type="text"></label></form>
    <form style="display: block;"><label for="FIELD_2" id="FIELD_2"><input type="text"></label></form>
    <form style="display: block;"><label for="VALUE_2" id="VALUE_2"><input type="text"></label></form>
    <form style="display: block;"><label for="FIELD_3" id="FIELD_3"><input type="text"></label></form>
    <form style="display: block;"><label for="VALUE_3" id="VALUE_3"><input type="text"></label></form>
    <p id="code">Code: </p>
    <script>
        var FIELD = 1;
        var VALUE = 1;
        var MAX = 3;
        for(FIELD && VALUE;FIELD<MAX && VALUE<MAX;FIELD   && VALUE  ){
            const FI=document.getElementById('FIELD_' FIELD);
            const VL=document.getElementById('VALUE_' FIELD);
            FI.style.display="none";
            VL.style.display="none";
        }
    </script>
    <script>
        var FIELD = 1;
        var VALUE = 1;
        var string = "!Auth ";
        const btn = document.getElementById('New_Field');
        //const newparagraph = document.getElementById('Paragraph');
        const code = document.getElementById('code');
        const generate = document.getElementById('Generate');
        
        btn.addEventListener("click", function () {
            var FIELD_ = document.getElementById('FIELD_' FIELD);
            var VALUE_ = document.getElementById('VALUE_' VALUE);
            FIELD  ;
            VALUE  ;
            //newparagraph.textContent="--Generate the stuff under here--";
            //FIELD_1.style.display="none";
            //FIELD_.style.display="none";
            if(FIELD_.style.display=="none"){
                FIELD_.style.display="block";
            }
            if(VALUE_.style.display=="none"){
                VALUE_.style.display="block";
            }
            //document.body.innerHTML(alert("FIELD :" FIELD "\nVALUE: " VALUE));
            /*else{
                FIELD_1.style.display="none"
            }
            */
        })
        const Name=document.getElementById('name');
        const Category=document.getElementById('category');
        //Name.addEventListener("play",)
        
        generate.addEventListener("click", function() {
        
            string = "!Auth " Category.value " " Name.value " "
            for(var fi=1;fi<FIELD;fi  ){
                var RDFI = document.getElementById("FIELD_" fi);
                var RDVL = document.getElementById("VALUE_" fi);
                var acvaFI=RDFI.value;
                var acvaVL=RDVL.value;
                string=string "#" acvaFI " " acvaVL "\n";
                
            }
            code.textContent="Code: \n" string
        })
    </script>
</body>
</html>

I am trying to make a website that will generate you a home page as i have a working Workshop but the command may be a little confusing. Thats why i made this so that ppl can visualise what their home page might look like. But i ran into an issue... I can not seem to be able to read the values out of the input box. Here is what i was intending to make |NAME: | |CATEGORY: | |FIELD| |VALUE| ... because my command is >!Auth <Each field starts with a # and its name can be only one word and their can be a maximum up to 20 fields but for the website for now there are only 3 FIELDS and 3 VALUES>.

CodePudding user response：

By doing this const Name=document.getElementById('name'); you are getting the <label> element, not the <input> element, that's why Name.value is undefined.

The value of the for attribute must be a single ID for a form related element in the same document as the element.

You should add id attribute to <input> element:

<form style="display: block;">
  <label for="Name" id="name" >Name: 
    <input id="Name" type="text" required>
  </label>
</form>

then change this:

const Name=document.getElementById('name');

to this:

const Name=document.getElementById('Name');

CodePudding user response：

Here is the "fixed" code:

<!DOCTYPE html>
<html>
<body>
    <h1 style="text-align: center;">Your Page</h1>
    <p id="Paragraph"></p>
    <form style="display: block;"><label>Name: <input type="text" required id="name"></label></form>
    <form style="display: block;"><label>Category: <input type="text" required id="category"></label></form>
    <button type="button" id="New_Field" style="font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif; height: 50px ;background-color: rgb(24, 255, 24); width: 100px; color: black;">New Page</button>
    <button type="button" id="Generate">Generate</button>
    <form style="display: block;"><label><input type="text" id="FIELD_3" style="width: 300px;"></label></form>
    <form style="display: block;"><label><input type="text" id="VALUE_3" style="height: 75px;width: 300px; text-align: left; vertical-align: top; columns: 4;"></label></form>
    <form style="display: block;"><label><input type="text" id="FIELD_2" style="width: 300px;"></label></form>
    <form style="display: block;"><label><input type="text" id="VALUE_2" style="height: 75px;width: 300px; text-align: left; vertical-align: top; columns: 4;"></label></form>
    <form style="display: block;"><label><input type="text" id="FIELD_1" style="width: 300px;"></label></form>
    <form style="display: block;"><label><input type="text" id="VALUE_1" style="height: 75px;width: 300px; text-align: left; vertical-align: top; columns: 4;"></label></form>
    <pre id="code">Code: </pre>
    <script>
        document.getElementById("name").value="TEST";
        document.getElementById("category").value="Maps";
        var FIELD = 1;
        var VALUE = 1;
        var MAX = 3;
        for(FIELD && VALUE;FIELD<MAX && VALUE<MAX;FIELD   && VALUE  ){
            const FI=document.getElementById('FIELD_' FIELD);
            const VL=document.getElementById('VALUE_' FIELD);
            FI.style.display="none";
            VL.style.display="none";
        }
    </script>
    <script>
        var FIELD = 1;
        var VALUE = 1;
        var string = "!Auth ";
        const btn = document.getElementById('New_Field');
        //const newparagraph = document.getElementById('Paragraph');
        const code = document.getElementById('code');
        const generate = document.getElementById('Generate');
        
        btn.addEventListener("click", function () {
            var FIELD_ = document.getElementById('FIELD_' FIELD);
            var VALUE_ = document.getElementById('VALUE_' VALUE);
            FIELD  ;
            VALUE  ;
            //alert("FIELD_" FIELD "\nVALUE_" VALUE);
            //newparagraph.textContent="--Generate the stuff under here--";
            //FIELD_1.style.display="none";
            //FIELD_.style.display="none";
            if(FIELD_.style.display=="none"){
                FIELD_.style.display="block";
            }
            if(VALUE_.style.display=="none"){
                VALUE_.style.display="block";
            }
            //document.body.innerHTML(alert("FIELD :" FIELD "\nVALUE: " VALUE));
            /*else{
                FIELD_1.style.display="none"
            }
            */
        })
        const Name=document.getElementById('name');
        const Category=document.getElementById('category');
        //Name.addEventListener("play",)
        
        generate.addEventListener("click", function() {
            string = "!Auth " Category.value " " Name.value " "
            string = string "#" document.getElementById("FIELD_3").value " " document.getElementById("VALUE_3").value "\n";
            //alert(string = string "#" document.getElementById("FIELD_3").value " " document.getElementById("VALUE_3").value "\n");
            for(var fi=1;fi<FIELD;fi  ){
                var RDFI = document.getElementById("FIELD_" (fi));
                //alert("Reading:\nFIELD_" fi);
                var RDVL = document.getElementById("VALUE_" (fi));
                //alert("Reading:\nVALUE_" fi);
                var acvaFI=RDFI.value;
                var acvaVL=RDVL.value;
                
                string=string "#" acvaFI " " acvaVL "\n";
            }
            string = string;
            code.textContent="Code: " string;
            //document.body.innerHTML("<pre>") string document.body.innerHTML("<\pre>")

        })
    </script>
</body>
</html>