[英]Pass Parameter From OnClick Event from one Javascript Function to Another
I'm trying to pass a value from a hyperlink click from one JS function to another. 我正在尝试将超链接单击中的值从一个JS函数传递给另一个。 In this context, I need the hyperlink text, which is a key from local storage.
在这种情况下,我需要超链接文本,这是本地存储中的密钥。 I need to pass that to a different html/JS script to access this key from local storage there.
我需要将其传递给其他html / JS脚本,以从本地存储访问此密钥。 I'm having a hell of a time accomplishing this.
我在完成这项工作方面真是费劲。 The last console.log();
最后一个console.log(); statement in this script returns "Link names: undefined"
该脚本中的语句返回“链接名称:未定义”
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>
Since the link name doesn't change, just define the onclick function while you still have the key handy. 由于链接名称不会改变,因此只需定义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);
At the bottom of this question is an MCVE of that solution. 这个问题的底部是该解决方案的MCVE。
Once you have it in the onclick, you could set another localstorage key that won't ever be a text of the link, something like "hambone_key" and set its value to the key you need to save, and then you can read "hambone_key" when you load up the page and get the key that way. 一旦将其保存在onclick中,就可以设置另一个永远不会成为链接文本的本地存储键,例如“ hambone_key”,并将其值设置为您需要保存的键,然后您可以阅读“ hambone_key” ”,当您加载页面并以这种方式获取密钥时。 Eg,:
例如,:
a.onclick = function(e) {
console.log("Link names: " + key);
localStorage["hambone_key"] = key;
};
and then on page load: 然后在页面加载时:
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
// ....
}
So, in the context of the code you have provided, it looks like this: 因此,在您提供的代码的上下文中,它看起来像这样:
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)
);
});
});
And here is the MCVE of getting the key in the onclick function. 这是在onclick函数中获取密钥的MCVE。 The below code does not use localStorage here because it is forbidden in StackOverflow snippets:
以下代码在此处不使用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>
I found a simple solution with JQuery: 我找到了一个使用JQuery的简单解决方案:
$(a).click(function(e) {
var txt = $(e.target).text();
console.log("Link: " + txt)
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.