Reputation: 39
I've looked everywhere and I can't seem to find an answer, or at least one I can understand at my very limited skill level (I'm essentially teaching myself html, css, and js with practice and Google). I am trying to use document.getElementById("button").onclick = buttonfunc;
as part of a function with buttonfunc
as a parameter. I've been able to call this function easily enough with something equivalent to Buttons(MyFunction);
, because if I put the parentheses like Buttons(MyFunction());
my understanding is that it treats the parameter as the value of MyFunction()
, even though it's a void function. The problem with this is that I can't pass parameters with the function, meaning I have to make a new function for every new thing I want a button to do, which I would like to avoid if I can because there might be very mundane or similar function. Is there a way to pass a parameter with the function so that I don't have to make a new one for every minute difference? Thanks in advance!
Here is the full code of the function and some examples of its use (I'm making a text adventure with 8 buttons).
function Buttons(b1, b2, b3, b4, b5, b6, b7, b8, b1func, b2func, b3func, b4func, b5func, b6func, b7func, b8func) {
if (b1func == 0) {
document.getElementById("b1").disabled = true;
document.getElementById("b1").innerHTML = "";
}
else {
document.getElementById("b1").disabled = false;
document.getElementById("b1").innerHTML = b1;
document.getElementById("b1").onclick = b1func;
}
if (b2func == 0) {
document.getElementById("b2").disabled = true;
document.getElementById("b2").innerHTML = "";
}
else {
document.getElementById("b2").disabled = false;
document.getElementById("b2").innerHTML = b2;
document.getElementById("b2").onclick = b2func;
}
if (b3func == 0) {
document.getElementById("b3").disabled = true;
document.getElementById("b3").innerHTML = "";
}
else {
document.getElementById("b3").disabled = false;
document.getElementById("b3").innerHTML = b3;
document.getElementById("b3").onclick = b3func;
}
if (b4func == 0) {
document.getElementById("b4").disabled = true;
document.getElementById("b4").innerHTML = "";
}
else {
document.getElementById("b4").disabled = false;
document.getElementById("b4").innerHTML = b4;
document.getElementById("b4").onclick = b4func;
}
if (b5func == 0) {
document.getElementById("b5").disabled = true;
document.getElementById("b5").innerHTML = "";
}
else {
document.getElementById("b5").disabled = false;
document.getElementById("b5").innerHTML = b5;
document.getElementById("b5").onclick = b5func;
}
if (b6func == 0) {
document.getElementById("b6").disabled = true;
document.getElementById("b6").innerHTML = "";
}
else {
document.getElementById("b6").disabled = false;
document.getElementById("b6").innerHTML = b6;
document.getElementById("b6").onclick = b6func;
}
if (b7func == 0) {
document.getElementById("b7").disabled = true;
document.getElementById("b7").innerHTML = "";
}
else {
document.getElementById("b7").disabled = false;
document.getElementById("b7").innerHTML = b7;
document.getElementById("b7").onclick = b7func;
}
if (b8func == 0) {
document.getElementById("b8").disabled = true;
document.getElementById("b8").innerHTML = "";
}
else {
document.getElementById("b8").disabled = false;
document.getElementById("b8").innerHTML = b8;
document.getElementById("b8").onclick = b8func;
}
}
Buttons("Male", "Female", "Neutral (it pronouns)", "Neutral (they pronouns)", "", "", "", "", He, She, It, They, 0, 0, 0, 0);
Buttons(
"Citizen<span class=\"tooltip\">You are the winner of an essay-writing contest, earning a funded trip to the cosmos on the condition you keep a journal of your experience to be published at the conclusion of your journey. You will start at iDune, the Intragalactic Diplomatic post of the United Nations of Earth.</span>",
"Diplomat<span class=\"tooltip\">You are a diplomat sent to Armistice, a city-planet and the political hub of the galaxy. You are representing the United Nations of Earth, playing a very minor role in increasing the human population at Armistice and creating positive first impressions among its citizens.</span>",
"Explorer<span class=\"tooltip\">You are an opportunist, ready to explore planetary systems that have yet to be mapped, and hopefully find valuable resources or phenomena to be claimed, patented, or profited from. You will start at Tenkets, a commercial hub and massive market satellite established by the shelish.</span>",
"Merchant<span class=\"tooltip\">You are a vendor of goods from Earth, ready to spread new commodities to the alien races for a price. What goods you sell, and their legality, is up to you. You will start in Menagerie, a cultural hub planet and allegedly the most diverse place in the galaxy.</span>",
"Spacer<span class=\"tooltip\">You are a member of the United Nations of Earth's Interstellar Defense Force, the servicemen and women of which are known as \"spacers\". You are currently on a survey ship, working with a small squad to protect its crew as they investigate UNE interests.</span>",
"Stowaway<span class=\"tooltip\">You are a criminal stowed away on a ship leaving Earth. You have little to your name and no idea where the ship you are in is headed, nor do you know whether you will be able to safely disembark without getting caught.</span>",
"", "", Citizen, Diplomat, Explorer, Merchant, Spacer, Stowaway, 0, 0);
Buttons("Yes<span class=\"tooltip\">Continue with the selected start.</span>", "No<span class=\"tooltip\">Restart character creation.</span>", "", "", "", "", "", "", Start, CharacterCreation, 0, 0, 0, 0, 0, 0);
Upvotes: 1
Views: 145
Reputation: 4912
Use the .bind
method.
const myFunctionWithParameters = myFunction.bind(null, myParameter, myOtherParameter);
myFunctionWithParameters();
// the above line is equivalent to the below line (unless myFunction uses the this variable)
myFunction(myParameter, myOtherParameter);
For example:
const sayHello = console.log.bind(null, 'hello');
sayHello();
// this is the same as:
console.log('hello');
Upvotes: 1