Question

我有一个输入元素，其ID是我试图从中提取其值的元素。但是我的代码在jsbin中返回为0，并且在服务器上未定义。

用户选择要添加的社交媒体链接，当他们选择该链接时，该链接应使用完整的URL填充，然后向其添加用户名。然后，当单击showHTML（）函数时，应使用添加的输入和相关的社交媒体图标（成功运行）填充URL，但是其输入将返回0或未定义。

有人可以教育我或为我指明正确的方向吗？

这是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>

Answer 1

我设法通过以下代码在jsbin上运行它，但是我仍然在服务器上收到undefined消息。

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 ;
}

表单输入返回0

1 个答案: