堆棧內存溢出
  簡體   English   中英

將OnClick事件中的參數從一個Javascript函數傳遞給另一個Javascript函數

[英]Pass Parameter From OnClick Event from one Javascript Function to Another

 原文  2018-10-03 21:33:32  0   2    javascript

問題描述

我正在嘗試將超鏈接單擊中的值從一個JS函數傳遞給另一個。 在這種情況下，我需要超鏈接文本，這是本地存儲中的密鑰。 我需要將其傳遞給其他html / JS腳本，以從本地存儲訪問此密鑰。 我在完成這項工作方面真是費勁。 最后一個console.log（）; 該腳本中的語句返回“鏈接名稱：未定義” 

 myApp.onPageInit("saved_locations", function(page) { var fragment = document.createDocumentFragment(); var parent = document.getElementById("saved"); var node; // iterate localStorage for (var i = 0; i < localStorage.length; i++) { // set iteration key name var key = localStorage.key(i); // use key name to retrieve the corresponding value var value = localStorage.getItem(key); // console.log the iteration key and value console.log("Key: " + key + ", Value: " + value); let node = document.createElement("div"); let a = document.createElement("a"); a.className = "link"; a.textContent = key; a.style.color = "blue"; a.href = "map_G.html"; node.appendChild(a); fragment.appendChild(node); } parent.appendChild(fragment); var myForm = document.getElementById("enter_location"); myForm.addEventListener("submit", function saveSearchLocation(event) { //event.preventDefault(); var lat = document.getElementById("Latitude").value; var lon = document.getElementById("Longitude").value; var locationStr = document.getElementById("Location").value; //Save location parameters to local storage savedLocationParams = [lat, lon, locationStr]; window.localStorage.setItem( locationStr, JSON.stringify(savedLocationParams) ); }); for (var i in document.getElementsByClassName("link")) { var link = document.getElementsByClassName("link")[i]; link.onclick = function(e) { linkNames = e.srcElement.attributes.textContent; console.log("Link names: " + linkNames); }; } }); 
 <body> <div class="pages"> <div data-page="saved_locations" id="saved" class="page navbar-through no- toolbar" align="center"> <h2><br /><u>Enter A Location<br /><br /></u></h2> <form id="enter_location"> Latitude: <input type="text" id="Latitude" value=""><br> Longitude: <input type="text" id="Longitude" value=""><br> Location: <input type="text" id="Location" value=""><br> <input type="submit" value="Submit"> </form> <h2><u>Saved Locations</u></h2> </div> </div> </body>

2 個解決方案

解決方案1
 0  2018-10-03 21:55:01

由於鏈接名稱不會改變，因此只需定義onclick函數即可，同時還可以使用快捷鍵。 

let a = document.createElement("a");
a.className = "link";
a.textContent = key;
a.style.color = "blue";
a.href = "map_G.html";

a.onclick = function(e) {
  console.log("Link names: " + key);
};

node.appendChild(a);

這個問題的底部是該解決方案的MCVE。

一旦將其保存在onclick中，就可以設置另一個永遠不會成為鏈接文本的本地存儲鍵，例如“ hambone_key”，並將其值設置為您需要保存的鍵，然后您可以閱讀“ hambone_key” ”，當您加載頁面並以這種方式獲取密鑰時。 例如，： 

a.onclick = function(e) {
  console.log("Link names: " + key);
  localStorage["hambone_key"] = key;
};

然后在頁面加載時： 

var saved_key = localStorage.getItem("hambone_key");
if (saved_key === null) {
    // there is no saved key
} else { 
    // there is a saved key
    var important_value = localStorage.getItem(saved_key);

    // do stuff with important_value here
    // ....
}

因此，在您提供的代碼的上下文中，它看起來像這樣： 

myApp.onPageInit("saved_locations", function(page) {
  var fragment = document.createDocumentFragment();
  var parent = document.getElementById("saved");
  var node;
  // iterate localStorage
  for (var i = 0; i < localStorage.length; i++) {
    // set iteration key name
    var key = localStorage.key(i);

    // use key name to retrieve the corresponding value
    var value = localStorage.getItem(key);

    // console.log the iteration key and value
    console.log("Key: " + key + ", Value: " + value);

    let node = document.createElement("div");
    let a = document.createElement("a");
    a.className = "link";
    a.textContent = key;
    a.style.color = "blue";
    a.href = "map_G.html";

    a.onclick = function(e) {
      console.log("Link names: " + key);
      localStorage["hambone_key"] = key;
    };

    node.appendChild(a);

    fragment.appendChild(node);
  }

  parent.appendChild(fragment);

  var myForm = document.getElementById("enter_location");

  myForm.addEventListener("submit", function saveSearchLocation(event) {
    //event.preventDefault();

    var lat = document.getElementById("Latitude").value;
    var lon = document.getElementById("Longitude").value;
    var locationStr = document.getElementById("Location").value;

    //Save location parameters to local storage
    savedLocationParams = [lat, lon, locationStr];
    window.localStorage.setItem(
      locationStr,
      JSON.stringify(savedLocationParams)
    );
  });
});

這是在onclick函數中獲取密鑰的MCVE。 以下代碼在此處不使用localStorage，因為StackOverflow代碼段中禁止使用它： 

 var fragment = document.createDocumentFragment(); var parent = document.getElementById("saved"); var node; var fakeLocalStorage = { "key0": "value0", "key1": "value1", "key2": "value2" }; // iterate localStorage //for (var i = 0; i < localStorage.length; i++) { for (var i = 0; i < 3; i++) { // set iteration key name //var key = localStorage.key(i); // use key name to retrieve the corresponding value //var value = localStorage[key]; // set iteration key name let key = Object.keys(fakeLocalStorage)[i]; // use key name to retrieve the corresponding value let value = fakeLocalStorage[key]; // console.log the iteration key and value console.log("Key: " + key + ", Value: " + value); let node = document.createElement("div"); let a = document.createElement("a"); a.className = "link"; a.textContent = key; a.style.color = "blue"; a.href = "javascript:return false;"; a.onclick = function(e) { console.log("Link names: " + key); }; node.appendChild(a); fragment.appendChild(node); } parent.appendChild(fragment); var myForm = document.getElementById("enter_location"); myForm.addEventListener("submit", function saveSearchLocation(event) { //event.preventDefault(); var lat = document.getElementById("Latitude").value; var lon = document.getElementById("Longitude").value; var locationStr = document.getElementById("Location").value; //Save location parameters to local storage savedLocationParams = [lat, lon, locationStr]; window.localStorage.setItem( locationStr, JSON.stringify(savedLocationParams) ); }); 
 <body> <div class="pages"> <div data-page="saved_locations" id="saved" class="page navbar-through no- toolbar" align="center"> <h2><br /><u>Enter A Location<br /><br /></u></h2> <form id="enter_location"> Latitude: <input type="text" id="Latitude" value=""> <br /> Longitude: <input type="text" id="Longitude" value=""> <br /> Location: <input type="text" id="Location" value=""> <br /> <input type="submit" value="Submit"> </form> <h2><u>Saved Locations</u></h2> </div> </div><br /><br /><br /><br /><br /><br /><br /> </body>

解決方案2
 0  2018-10-04 16:03:58

我找到了一個使用JQuery的簡單解決方案： 

$(a).click(function(e) {
          var txt = $(e.target).text();
          console.log("Link: " + txt)
          });

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何將參數從列表項傳遞到onClick事件 將參數從一個箭頭函數傳遞給另一個？ 將對象從事件函數作為參數傳遞給另一個事件函數 如何通過 javascript 中的 onclick 將值從一頁傳遞到另一頁？ 在JavaScript中從另一個函數訪問參數 將Javascript數據從一個函數傳遞到另一個函數 javascript將元素從一個函數傳遞到另一個函數 javascript - 將數據從一個函數傳遞到另一個函數 如何將參數從一個頁面 function 傳遞到另一個頁面 class function 在 Z9E13B69D1D715A927102ACAAAF14Z 通過&#39;onclick&#39;事件從另一個函數調用一個函數
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM