Develop Reference

Wiring up a custom button in BigCommerce Stencil

I'm trying to wrap my head around how to wire up a simple button in BigCommerce Stencil. I've been using this platform for about 24 hours now, so any help you can give is MUCH appreciated!! I haven't used Handlebars.js or jQuery in a few years so I'm pretty rusty.
I'm using the Cornerstone Theme.
What I'm looking to do is:
Click a button
Array of objects sent to my JS function
JS Function adds all the items in the array to the cart.
I feel like this shouldn't be that hard, but where I am getting stuck is.
Getting data that is available in the HTML to be available to my function.
handleButtons() {
$('#add-all-to-cart').on('click', (event) => this.addAllItemsToCart(event));
$('#remove-all-from-cart').on('click', (event) => this.removeAllFromCart(event));
}
//I want to supply {{category.products}} from the HTML
addAllItemsToCart(e) {
console.log('Adding all items to cart');
}
removeAllFromCart(e) {
console.log('Removing all items from cart');
}
And on the HTML side, I have
//This seems to be the way other buttons were made in the Theme
<input id='add-all-to-cart'
data-wait-message="{{lang 'products.adding_to_cart'}}"
class="button button--small"
type="submit"
value="{{lang 'products.add_all_to_cart'}}" />
<input
id="remove-all-from-cart"
data-wait-message="{{lang 'products.adding_to_cart'}}"
class="button button--small"
type="submit"
value="{{lang 'products.remove_all_from_cart'}}" />

The technically correct way of doing this would be to utilize the inject helper. This passes data through to the JS Context within the theme JavaScript files. Assuming you are in a file with access to this context (such as category.js), you could use the following code.
In your HTML: {{inject "categoryProducts" category.products}}
In your JS: console.log(this.context.categoryProducts);

How do I show a variable change

I'm new to coding. I'm trying to make a website to track my homework. I want it to show what I have to do. This is my code.
<p id="demo">To do now.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "do"'>Click Here!</button>
var do="5";
how do I get "To do now." to 5.

You can't have Javascript just floating in an HTML file, as your browser won't know what to do with it. All Javascript should either be enclosed by <script> tags or in an external file and referenced with a <link> tag.
Correct me if I'm wrong, but as I understand it, you want the "To do now." to change to 5.
If so then you don't need your do variable. You would just change your onclick attribute value as follows:
<button type="button" onclick='document.getElementById("demo").innerHTML = "5"'>Click Here!</button>
Alternatively, if you wanted to have the text to change to 5 using a Javascript variable, you would open a script tag and insert a function to do so like this:
<script type="text/javascript">
function changeText() {
var doo = 5;
document.getElementById('demo').innerHTML = doo;
}
</script>
<p id="demo">To do now.</p>
<button type="button" onclick="changeText()">Click Here!</button>
I'm not too sure why you want to do this but I gave you this option anyway incase you did.
As you can see, I changed the do variable that you used to doo as you can't use the first version as a variable name. This is due to the fact that we use do as a keyword for loops. Check out w3's page on do/while loops here.
If you say you're new to programming then I thoroughly recommend using w3 schools HTML, CSS, and Javascript tutorials as once completed, you should have a much better understanding about how Javascript interfaces with HTML.

do is a predefined word in JavaScript, so you cannot use it as a variable. try something else. you can try this
<p id="demo">To do now.</p>
<button type="button" onclick="var doit='5'; document.getElementById('demo').innerHTML = doit;">Click Here!</button>

I don't recommend declaring functions in the html structure. It is better to put the JavaScript logic in the file separately, as in my example.
var inner = '5';
document.querySelector('button').onclick = function() {
document.getElementById("demo").innerHTML = inner;
}
<p id="demo">To do now.</p>
<button type="button">Click Here!</button>

Passing variable values to and from an inside iframe

I have a script in the iframe html file, and one in the main html file. I guess I can give names to these scripts if needed (its seems you can give names to everything).
I am trying to pass variable values to and from the main html file and the iframe.
So in the main file I wrote :
<script>
var test2 = 21;
document.getElementById("bottom1").innerHTML=test2;
</script>
This functions, it displays 21.
I have a button :
<div class="button" id="button" align="center">
<form>
<input type="button" value="New" onclick="clearValues(); return false;">
</input>
</form>
</div>
I have a function :
function clearValues() {
window.frames['middle'].test = test2;
document.getElementById('middle').contentWindow.location.reload();
}
In the frame, I have :
<script id="here">
... Some stuff ...
var test;
document.getElementById("up1").innerHTML=test;
</script>
This functions, it displays "undefined". But when I click the button, it still displays "undefined" instead of 21. I guess the variable "test" gets redefined when the iframe is reloaded.
But how to avoid that beats me.

No one seems to offer a clever suggestion, so I'll use cookies. Global variables names and values are going to be stored in a cookie. KISS (= "Keep It Simple and Supid").
Then I can have 2 functions, one which returns the value of the variable given its name and one which sets it.
If later on someone has a better idea, I would be very interested to read it.

Passing/exposing VXML Application root document variables to JSP

I need to have variables that are defined in my VXML application root document, which other documents modify, available to the JSP/EL pages. The idea here is that based on the value of these variable I can add logic to the JSP to render different blocks of VXML back to the IVR browser.
What I have tried so far does not generate any errors. It simply does not render the expected block of VXML code within the EL. My guess is that I am not de-referencing them correctly in EL.
Below is some of what I have tried.
root.vxml doc has
..
<var name="promptRetries" expr="''" />
...
start.jsp:
<vxml version="2.1" xmlns="http://www.w3.org/2001/vxml" application="/root.vxml" >
....
<assign name="application.promptRetries" expr="'3'" />
.....
<block>
<submit next="${pageContext.request.contextPath}/nextdoc.jsp" />
</block>
nextdoc.jsp
<vxml version="2.1" xmlns="http://www.w3.org/2001/vxml" application="/root.xml" >
....
<!-- at this point I can print and see the value of 3 for promptRetries -->
<!-- How can I expose this to JSP to accomplish something like the code below
I have used .equals() and other forms in the EL expression with no luck.
-->
<c:if test="${(application.promptRetries eq 1)} ">
<!-- Setting prompts for 1 retry -->
<catch event="noinput undefined" count="1" >
<audio expr="curPrompt2"/>
<log expr="buildLogStr(ibmCallId, documentName,frmName ,blkName,
'event=noinput count=1 reprompt', '')" />
</catch>
</c:if>
...
....

When developing VoiceXML applications in JSP, you need to be aware that there are two execution spaces. First, the Java server that generates the VoiceXML. Second, the VoiceXML Browser that executes it.
You already have an example of passing data from JSP to VoiceXML with the ${variable_name} syntax. To pass data from VoiceXML to JSP, you need to explicitly list the variables to send in the submit element:
<submit next="${pageContext.request.contextPath}/nextdoc.jsp" namelist="promptRetries"/>
And then in your second JSP page, use
request.getParameter("promptRetries")
to access the variable sent from the browser.

call innerHTML based on a condition from jsp code in spring mvc

I am trying to find a way to have the document.getElementById("1").innerHTML to get triggered based on a condition coming from jsp code.
For example I have the following jsp code on the jsp page,
<table border="1">
<c:forEach items="${elements}" var="element">
<tr>
<td>${element.elementNumber}<br /> ${element.isReserved}
</td>
</tr>
</c:forEach>
</table>
Based on "element.isReserved", I need to change an element (supposedly using .innerHTML)in html. The element in html looks like the following. I have several of these elements.
<div class="col-xs-2">
<div class="o-btn">
<a id="1" onClick="myFunction(this);">1</a>
</div>
<div class="clearfix"></div>
</div>
As shown above, it is displayed as a button with value "1". I want to change the value to "X" based on a condition. I can do this directly with js,
<script>
function myFunction(elmnt) {}
function isReserved() {
return 'X';
}
document.getElementById("1").innerHTML = isReserved();
</script>
But I need to make it dependent on the output from spring or the jsp code shown above. My desired output is that the "1" displayed on the button will change to a "X" when the element.isReserved() (inside the jsp code) evaluates to true. Since I have several of the button elements, I need to check for every button if element.isReserved() evaluates to true.

I was able to make it work. I found this article very helpful.
After understanding (and accepting reality) how JSP works with html, I had to slightly restructure my program.
From spring mvc, I added my variables to the model,
model.addAttribute("element1", 1);
On the jsp page I checked the variables with javascript,
if("${element1}" == 1) {
document.getElementById("1").innerHTML = 'X';
document.getElementById("1").style.color = 'red';
}
Probably there are better solutions, but for a newbie like me, it works great!
The article I mentioned above is indeed a good and important read for new comers.