Hi, looking for a bit of JS help. I am building a ...
# suitescript
g
Hi, looking for a bit of JS help. I am building a string, while going through a loop. I hope to add a popup with the string and the user should be able to click a link to select one of the options in the string.
Copy code
msg +=
            "<p><b><a id='book' onClick='"+ bookRate(rate.id, shipmentID)+"' >Select This Rate</a></b></p>"
The above is running the function when building the string The below is telling me that bookRate is not defined.
Copy code
msg +=
            "<p><b><a id='book' onClick='bookRate(rate.id, shipmentID)' >Select This Rate</a></b></p>"
Whats the best way to go about this?
b
the best way is to use javascript to add a click event handler to your book anchor element
usually via selecting the element with the id
book
and setting the onclick event handler
it minimizes the mixing of logic and presentation, avoids eval, and avoids polluting the global scope
if you just want to make your code work, then you need to understand that the click event is essentially using eval to run your onClick
it will run in the global scope, so you would need to make sure that your bookRate function is set on the window global
g
I appreciate this! But doing it the right way, how would i pass in my params?
the values are only known while in the loop
b
you can create your function in your loop
g
and it will rem the values each time or i have to name it diff each time?
b
not actually sure what your code does, but the name of the function only matters if you leave it as is and use the onClick attribute of the anchor element
if you do that , you probably want to simply hardcode the rate.id and shipmentID
g
I am not sure that I am following. I am looping through a list of rates and building a string that I want to display. For each rate, I am including a link that should submit the rate for booking, I need to pass in a couple details. I cannot do document.getElementById('book').click = bookRate(rate.id, shipmentID) while still in the loop and afterwards I do not have the params anymore
b
basically none of the code you shared will do what you want it to do
document.getElementById('book')
works be identifiying html elements by id
it would need to be unique per anchor
.click
is not the name of the onclick event handler
you should go through the documentation of that link, it tells you how to set that property, and the inputs to that function
unless your code is much more functional than your responses suggest,
bookRate(rate.id, shipmentID)
will not return a function
you need a basic understanding of how event handlers work to use onClick
you are essentially setting up a function to be called whenever an event (in this case click) occurs
my suggestion to you for creating your onclick function is to use a Higher-Order Function or to use bind
you have probably guessed by now that the solution i outlined requires a more advanced understanding of javascript to implement.
you can probably eventually get your original solution to work by making bookRate available on the window global and hardcoding your parameters in the string you use for the onClick
the basic answer to your question about how to pass in parameters is to understand that javascript is a functional language where you can create dynamic functions in your code
the basic example usually involves creating a function that adds 2 different numbers for example
Copy code
var a = 1;
var b = 2;
document.getElementById("book").onclick = function () {
  console.log(a + b);
};
would log 3 when the link is pressed because the onclick function still has access to a and b through its closure