javascriptmodalpopups

Getting value of <p> without the use of innerHTML


first of all I'm sorry if this is a long code segment however, I'm trying to make a modal window which writes the thing you wrote in my user form and asks you to confirm it. I am currently in a class to learn Javascript and I'm not allowed to use innerHTML and I must write the "Firstname:" etc dynamically (the text for firstname) and am not allowed to just write it inside the popup window. I've gotten most stuff to work but the "Firstname:" "Lastname" etc comes up as "undefined" or (as you can see the thing I tried with just the first name in this case) comes up as "null".

Hopefully someone can shed some light on this subject for me, this is the HTML:

<form action="http://voyager.lnu.se/tekinet/kurser/dtt/wp_webbteknik/process_form.php" method="POST" id="userform" target="_blank"> 

            <p id="formQuestion1">Förnamn</p>
            <div id="error1"></div>
            <input type="text" name="firstName" id="test"/>

            <p id="formQuestion2">Efternamn</p>
            <div id="error2"></div>
            <input type="text" name="lastName" />

            <p id="formQuestion3">Postnummer</p>
            <div id="error3"></div>
            <input type="text" name="postCode" id="codeText"/>

            <p id="formQuestion4">E-post</p>
            <div id="error4"></div>
            <input type="text" name="eMail" />

            <br />
            <br />

            <label id="model" class="formQuestion" for="priceModel">Prismodell</label>
            <br />
                        <select name="Type" id="priceModel">
                            <option value="Låg" selected>Låg</option>
                            <option value="Medel">Medel</option>
                            <option value="Hög">Hög</option>
                        </select>


                <br />
                <br />
                <br />
                <input id="sendButton" type="submit" value="Genomför Köp" />
          </form>

And here is the segment for the modal window (Javascript)

 function popup(backgroundDiv) {
var popForm = document.getElementById("userform");
var myDiv = document.createElement("div");
myDiv.className = "popupWindow";
var priceModel = document.getElementById("priceModel");

// Knappar

var newButton = document.createElement("button");
var newerButton = document.createElement("button");

newButton.setAttribute("value", "Skicka");

newButton.innerHTML = "Skicka";  // Here I actually use innerHTML because I don't know
newerButton.innerHTML = "Stäng"; // any other way to set the text inside the button

newButton.className = "popupButton";
newerButton.className = "popupButton";

newButton.setAttribute("id", "Skicka");
newerButton.setAttribute("id", "Avbryt");

myDiv.appendChild(newButton);
myDiv.appendChild(newerButton);

// Information

var h1 = document.createElement("h1");
h1.setAttribute("id", "popuph1");
var h1Text = document.createTextNode("Vänligen kontrollera dina uppgifter");

var text = document.getElementById("formQuestion1");

var writeFname = text.nodeValue + popForm.elements.firstName.value;
var writeLname = document.getElementById("formQuestion2").value + popForm.elements.lastName.value;
var writeCode = document.getElementById("formQuestion3").value + popForm.elements.postCode.value;
var writeMail = document.getElementById("formQuestion4").value + popForm.elements.eMail.value;
var writePlan = document.getElementById("model").value + priceModel.value; 

var p1 = document.createTextNode(writeFname);
var p2 = document.createTextNode(writeLname);
var p3 = document.createTextNode(writeCode);
var p4 = document.createTextNode(writeMail);
var p5 = document.createTextNode(writePlan);

h1.appendChild(h1Text);

myDiv.appendChild(h1);
myDiv.appendChild(p1);
myDiv.appendChild(document.createElement('br'));
myDiv.appendChild(p2);
myDiv.appendChild(document.createElement('br'));
myDiv.appendChild(p3);
myDiv.appendChild(document.createElement('br'));
myDiv.appendChild(p4);
myDiv.appendChild(document.createElement('br'));
myDiv.appendChild(p5);


document.body.appendChild(myDiv);

newButton.onclick = function () {
    document.body.removeChild(myDiv);
    document.body.removeChild(backgroundDiv);
    return true; 
};

Solution

  • If you don't want to use innerHTML then you can use those options, suppose you want value from this node <p id="formQuestion1">Förnamn</p>

    Then your code would be

    var dom = document.getElementById('formQuestion1');
    
    1) var res = dom.innerText;
    

    OR

    2) var res = dom.textContent;
    

    OR

    3) var res = dom.firstChild.nodeValue;