ホーム>source

値を抽出しようとしている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>

あなたの答え
  • 解決した方法 # 1

    次のコードでjsbinで動作するようになりましたが、サーバー上で未定義として受信しています。

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

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ r - パーセントに基づいて平均と標準偏差を計算する方法