form input returns as 0

I have an input element with an ID which I'm trying to extract its value from. However my code is returning as 0 in jsbin and undefined on my server.

The user chooses the social media link they want to add, when they select the link it should populate with the full URL for them to then add their username to. Then when the showHTML() function is clicked it should populate the URL with their added input and the relevant social media icon(which works successfully) however their input is returned as 0 or undefined.

Could someone educate me or point me in the right direction please?

Here is a link to the jsbin: https://jsbin.com/wemepu/edit?js,output

var socialOne = document.getElementById("socialOne");
var socialTwo = document.getElementById("socialTwo");
var socialThree = document.getElementById("socialThree");

// SOCIAL ONE
//Create array of options to be added
var array = ["select", "twitter", "instagram", "snapchat", "amazon"];

//Create and append select list
var selectListOne = document.createElement("select");
selectListOne.setAttribute("id", "socialSelectOne");
socialOne.appendChild(selectListOne);

//Create and append the options
for (var i = 0; i < array.length; i++)
var option = document.createElement("option");
option.setAttribute("value", array[i]);
option.text = array[i];
selectListOne.appendChild(option);


// SOCIAL TWO
//Create and append select list
var selectListTwo = document.createElement("select");
selectListTwo.setAttribute("id", "socialSelectTwo");
socialTwo.appendChild(selectListTwo);

//Create and append the options
for (var i = 0; i < array.length; i++)
var option = document.createElement("option");
option.setAttribute("value", array[i]);
option.text = array[i];
selectListTwo.appendChild(option);


// SOCIAL THREE
//Create and append select list
var selectListThree = document.createElement("select");
selectListThree.setAttribute("id", "socialSelectThree");
socialThree.appendChild(selectListThree);

//Create and append the options
for (var i = 0; i < array.length; i++)
var option = document.createElement("option");
option.setAttribute("value", array[i]);
option.text = array[i];
selectListThree.appendChild(option);


// sort through choice and return relevant url and icon
function showChoiceOne()

var userChoiceOne = document.getElementById("socialSelectOne").value;

switch (userChoiceOne)
case "select":
outputOne = "";
iconOne = "";
break;
case "twitter":
outputOne = "https://twitter.com/";
iconOne = "<img style="width: 40px;" src="http://camthemes.com/wp-content/themes/camthemes/uploads/icons/twitter.png" />";
break;
case "instagram":
outputOne = "https://instagram.com/";
iconOne = "<img style="width: 40px;" src="http://camthemes.com/wp-content/themes/camthemes/uploads/icons/instagram.png" />";
break;
case "snapchat":
outputOne = "https://www.snapchat.com/add/";
iconOne = "<img style="width: 40px;" src="http://camthemes.com/wp-content/themes/camthemes/uploads/icons/snapchat.png" />";
break
case "amazon":
outputOne = "https://www.amazon.com/registry/wishlist/";
iconOne = "<img style="width: 40px;" src="http://camthemes.com/wp-content/themes/camthemes/uploads/icons/amazon.png" />";
break;


document.getElementById("revealChoiceOne").value =
outputOne;


function showChoiceTwo()

var userChoiceTwo = document.getElementById("socialSelectTwo").value;

switch (userChoiceTwo)
case "select":
outputTwo = "";
iconTwo = "";
break;
case "twitter":
outputTwo = "https://twitter.com/";
iconTwo = "<img style="width: 40px;" src="http://camthemes.com/wp-content/themes/camthemes/uploads/icons/twitter.png" />";
break;
case "instagram":
outputTwo = "https://instagram.com/";
iconTwo = "<img style="width: 40px;" src="http://camthemes.com/wp-content/themes/camthemes/uploads/icons/instagram.png" />";
break;
case "snapchat":
outputTwo = "https://www.snapchat.com/add/";
iconTwo = "<img style="width: 40px;" src="http://camthemes.com/wp-content/themes/camthemes/uploads/icons/snapchat.png" />";
break
case "amazon":
outputTwo = "https://www.amazon.com/registry/wishlist/";
iconTwo = "<img style="width: 40px;" src="http://camthemes.com/wp-content/themes/camthemes/uploads/icons/amazon.png" />";
break;


document.getElementById("revealChoiceTwo").value =
outputTwo;


function showChoiceThree()

var userChoiceThree = document.getElementById("socialSelectThree").value;

switch (userChoiceThree)
case "select":
outputThree = "";
iconThree = "";
break;
case "twitter":
outputThree = "https://twitter.com/";
iconThree = "<img style="width: 40px;" src="http://camthemes.com/wp-content/themes/camthemes/uploads/icons/twitter.png" />";
break;
case "instagram":
outputThree = "https://instagram.com/";
iconThree = "<img style="width: 40px;" src="http://camthemes.com/wp-content/themes/camthemes/uploads/icons/instagram.png" />";
break;
case "snapchat":
outputThree = "https://www.snapchat.com/add/";
iconThree = "<img style="width: 40px;" src="http://camthemes.com/wp-content/themes/camthemes/uploads/icons/snapchat.png" />";
break
case "amazon":
outputThree = "https://www.amazon.com/registry/wishlist/";
iconThree = "<img style="width: 40px;" src="http://camthemes.com/wp-content/themes/camthemes/uploads/icons/amazon.png" />";
break;



document.getElementById("revealChoiceThree").value =
outputThree;


// SOCIAL MEDIA PROFILES
let socialURLOne = document.getElementById("revealChoiceOne").value;
let socialURLTwo = document.getElementById("revealChoiceTwo").value;
let socialURLThree = document.getElementById("revealChoiceThree").value;



// show user input and the relevant icon in html
function showHTML()



document.getElementById("output").value = +socialURLOne + iconOne + socialURLTwo + iconTwo + socialURLThree + iconThree;


<!-- SOCIAL MEDIA PROFILES -->
<div class="form-group mt-5">
<h5>Social Links, please include the complete URL</h5>
<label>Choose 3 social links to add to your theme:</label>
<div class="row">
<div id="socialOne" class="btn col-md-2"></div>
<input type="button" class="col-md-2" onclick="showChoiceOne()" value="show URL" />
<input type="text" id="revealChoiceOne" class="col-md-5 form-control" required /> <span class="col-md-3 mt-3"><h4><i class="far fa-arrow-alt-circle-left"></i> add username</h4></span>
</div>
</div>
</div>
<div class="form-group mt-1">
<div class="row">
<div id="socialTwo" class="btn col-md-2"></div>
<input type="button" class="col-md-2" onclick="showChoiceTwo()" value="show URL" />
<input type="text" id="revealChoiceTwo" class="col-md-5 form-control" required /> <span class="col-md-3 mt-3"><h4><i class="far fa-arrow-alt-circle-left"></i> add username</h4></span>
</div>
</div>
</div>
<div class="form-group mt-1">
<div class="row">
<div id="socialThree" class="btn col-md-2"></div>
<input type="button" class="col-md-2" onclick="showChoiceThree()" value="show URL" />
<input type="text" id="revealChoiceThree" class="col-md-5 form-control" required /> <span class="col-md-3 mt-3"><h4><i class="far fa-arrow-alt-circle-left"></i> add username</h4></span>
</div>
<label class="mt-3"><i class="fas fa-exclamation-triangle"></i> Click 'show URL' for the HTML to load successfully!</label>
</div>
</div>


<div class="form-group">
<input type="button" onclick="showHTML()" value="show HTML" class="btn-block my-5">
<textarea id="output" class="form-control"></textarea>
</div>

1 Answer
1

I managed to get it working on jsbin with the following code however I am still receiving as undefined on my server.

var socialURLOne = document.getElementById('revealChoiceOne');
var userSocialInputOne = '';
socialURLOne.addEventListener('change', function(e)
userSocialInputOne = e.target.value;
);

var socialURLTwo = document.getElementById('revealChoiceTwo');
var userSocialInputTwo = '';
socialURLTwo.addEventListener('change', function(e)
userSocialInputTwo = e.target.value;
);

var socialURLThree = document.getElementById('revealChoiceThree');
var userSocialInputThree = '';
socialURLThree.addEventListener('change', function(e)
userSocialInputThree = e.target.value;
);


// show user input and the relevant icon in html
function showHTML()


document.getElementById("output").value =
userSocialInputOne + iconOne + userSocialInputTwo + iconTwo + userSocialInputThree + iconThree ;



By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.