Develop Reference

How can I create a dynamic product page using HTML, CSS, and Javascript

I currently only know javascript. But the thing is I looked up how to do it and some people talk about something called localStorage. I have tried this and for some reason when I jump to a new page those variables aren't kept. Maybe I am doing something wrong? I jump to a new page via
and all I want do do is select a certain image. take that image to a new page and add it to that page.
I tried using the localStorage variables and even turning it into JSON.stringify and doing JSON.parse when trying to call the localstorage to another script. It didn't seem to work for me. Is there another solution?
This is some of my code. There are two scripts.
document.querySelectorAll(".card").forEach(item => {
item.addEventListener("click", onProductClick);
})
var div;
var productImg;
var ratingElement;
var reviewCount;
var price;
function onProductClick(){
// This took a week to find out (this.id)
// console.log(this.id);
div = document.getElementById(this.id);
productImg = div.getElementsByTagName('img')[0];
ratingElement = div.getElementsByTagName('a')[2];
reviewCount = div.getElementsByTagName('a')[3]
price = div.getElementsByTagName('a')[4];
console.log(div.getElementsByTagName('a')[4]);
var productData = [div, productImg,ratingElement,reviewCount,price];
window.localStorage.setItem("price", JSON.stringify(price));
}
function TranslateProduct(){
console.log("Hello");
}
This is script 2
var productPageImage = document.getElementById("product-image");
var myData = localStorage['productdata-local'];
var value =JSON.parse(window.localStorage.getItem('price'));
console.log(value);
// function setProductPage(img){
// if(productImg != null){
// return;
// }
// console.log(window.price);
// }
To explain my thought process on this code in the first script I have multiple images that have event listeners for a click. I wanted to Click any given image and grab all the data about it and the product. Then I wanted to move that to another script (script 2) and add it to a dynamic second page. yet I print my variables and they work on the first script and somehow don't on the second. This is my code. in the meantime I will look into cookies Thank you!

Have you tried Cookies
You can always use cookies, but you may run into their limitations. These days, cookies are not the best choice, even though they have the ability to preserve data even longer than the current window session.
or you can make a GET request to the other page by attaching your serialized object to the URL as follows:
http://www.app.com/second.xyz?MyObject=SerializedData
That other page can then easily parse its URL and deserialize data using JavaScript.
you can check this answer for more details Pass javascript object from one page to other

How to set textbox input to a variable

I'm currently just getting into JavaScript with HTML. I have been using HTML and CSS for a while now, but I only just recently got into Python, so now I feel I'll be more capable / able to understand JavaScript.
I'm currently working on an idea I've had, a Fortune Cookie Maker. The user inputs text into a textbox input. This is stored in a variable. When the user clicks ok, it gets the text from the textbox, and sets it to that variable. Then, it switches the page, and gets the variable from the script, and sets a paragraph to the text value of that variable.
However, my problem is, the paragraph won't display the text.
Here's my code:
var fortune = null;
function dispTxt() {
var txt = document.getElementById('textbox').value;
var hid = document.getElementById('conftxt');
if (txt.length > 0) {
//hid.style.display = 'block';
document.getElementById("conftxt").style.opacity = 1;
document.getElementById("textbox").style.color = "#ffffff";
} else {
//hid.style.display = 'none';
document.getElementById("conftxt").style.opacity = 0;
//document.getElementById("textbox").style.color = "#000000";
}
document.getElementById("txt").addEventListener("onkeyup", function() {
dispTxt();
})
};
function confirm() {
//Get the text that is inputted by the user.
fortune = document.getElementById("conftxt").value;
window.location = "fortune.html";
window.alert(fortune);
}
function setFortune() {
document.getElementById('fortunetext').value = fortune;
}
And here's a link to the repl itself for reference.
Also, if anyone has any tips for how I should go about making the fortune cookie itself, please, let me know.
I essentially just want it to be so that once you confirm what the fortune says, the fortune cookie appears, and you can click on it, and break it open, and it reveals the fortune.
Thanks!

You say fortune = document.getElementById("conftxt").value;, but #conftxt is the button element.
fortune = document.getElementById("textbox").value; will do
But because the page refreshes/redirects to fortune.html the variable fortune is cleared again.
You have two options:
Use one HTML page, so you don't use redirects
Store the variable in localStorage or sessionStorage
Pass the value into the URL param. Links: Pass variable to URL and Get the passed variable from URl
I recommend 1.

You can't get the value because you are getting the wrong element
function confirm () {
fortune = document.getElementById("conftxt").value;
...
}
Should be
function confirm () {
fortune = document.getElementById("textbox").value;
...
}
Also, you are navigating between different pages, so, you need to pass this value

Open two urls with one click

I'm new to Google Sheets and Apps Script. I have a sheet with two URLS. In cell F1 is http://testurl1.com and in cell G1 is http://testurl2.com.
I would like to have a button or link or something in cell D1 that when I click it will open both of these links. I can do this manually with Alt-Enter but haven't been able to translate that to code.
I have been able to open both these urls from a menu item, but when I try calling the code from a cell it says
Exception: Cannot call SpreadsheetApp.getUi() from this context.
But the code works from a menu item. Weird. The code I'm currently trying to use is below but I am open to any suggestions!
function callOthers() {
myFunction()
Utilities.sleep(1500);
myFunction2()
}
function myFunction() {
var sheet = SpreadsheetApp.getActiveSheet();
var selection = sheet.getRange("F1").getValue();
var html = "<script>window.open('" + selection + "');google.script.host.close();</script>";
var userInterface = HtmlService.createHtmlOutput(html);
SpreadsheetApp.getUi().showModalDialog(userInterface, 'Open Tab');
}
function myFunction2() {
var sheet = SpreadsheetApp.getActiveSheet();
var selection2 = sheet.getRange("G1").getValue();
var html2 = "<script>window.open('" + selection2 + "');google.script.host.close();</script>";
var userInterface2 = HtmlService.createHtmlOutput(html2);
SpreadsheetApp.getUi().showModalDialog(userInterface2, 'Open Tab');
}

Problem
Custom function is blocked from being run when used in a cell
Explanation
There are three main ways of making a bound script function available in the Spreadsheet UI:
As a custom function that can be used like a formula
As a menu item that will run the function on click
As a "button" created via image or drawing that will run the function on click
All three have different execution context and limitations on what they can and cannot access, the most restrictive being the first. Custom functions execution context is bound to the cell it is called in, so you cannot do anything that affects the UI as a whole, which getUi() allows to do.
Additionally, since showModalDialog is a method that requires authorization on behalf of the user, even if the getUi() method was available, you could not show the dialog due to the fact that custom functions never ask users to authorize access to personal data.
Solution
If you want to interact with UI, you should either create a menu or a button as mentioned before.
Please note that users will have to give your script their permission for the following scope:
https://www.googleapis.com/auth/script.container.ui
References
Custom functions guide
showModalDialog method reference
getUi() method reference

Calling click event handler from code

We use the formassembly app to build hosted webforms.
FormAssembly offers conditional rules to show/hide sections. They also offer the ability to add custom Javascript to their form.
I want to use their native functionality to hide some sections, but I need to trigger this via javascript.
I have setup this form so that when 'scholarship' = 'yes', then the payment details section is hidden.
I have added some js so that if discount code = 'comp' then amount = 0 and scholarship = 'yes'. However, this change does not cause the payment details section to be hidden.
From chrome dev console I can see that this radio button has an event handler set for clicks, which must be the reason for the difference in behavior. So I'm inquiring whether there is a clean way to call the event handler from my code?
My code is very simple, and is called by setting a value in the discount code input field.
<script>
function setPrice(base,code) {
var calcprice = base;
var lcc;
// test if code is not null
if (code){
lcc = code.toLowerCase();
}
if (lcc == 'comp'){
calcprice = 0;
}
else if (code) {
calcprice = 'Invalid Code';
}
else {
calcprice = calcprice;}
if (calcprice == 0){
document.getElementById("tfa_715").checked = true;
}
return calcprice;
}
</script>

Is there anyway to add items to an existing list in the DOM

My goal is to take user input from a text field and add it directly to a list in the html when the user clicks the "add" button. When I preview the code in my workspace it allows me to enter text in the text field but it will not display in the section I have designated for my list on the web page. The variables at the beginning of the code are for additional processes that I will add later.
My code is:
var buttonone=document.getElementById('add-item-1');
var buttontwo=document.getElementById('add-item-2');
var compareB=document.getElementById('compare');
var resetB=document.getElementById('reset');
//function to add items to first list
function addListOne(addOne,listItem,listOne,list){
addOne = document.getElementById('item-field-1').value;
document.getElementById('list-one-item').innerHTML = addOne;
listOne= document.createElement('li');
listOne.appendChild(document.createTextNode(addOne));
list.appendChild(listOne);
}
buttonone.addEventListener( 'click', addListOne, false);

I have put your code into a jsfiddle at https://jsfiddle.net/s5xzazL1/1/ . Note only the first list and input has the event wired to it.
You can use your browsers developer tools to see the exceptions, e.g. in chrome Menu => More Tools => Developer Tools. If you then see the console you will see the error
Uncaught TypeError: Cannot read property 'appendChild' of undefined
When you enter valuer and click the add button, the list is replace by the text you've added, this is due to your code line
document.getElementById('list-one-item').innerHTML = addOne;
Which is incorrect and should be removed.
The exception how ever is due to the fact that the variable list is null. Yet it is being used as an object in the line
list.appendChild(listOne);
List is null, due to some misunderstanding about the parameters of the click event.
Your code:
function addListOne(addOne,listItem,listOne,list){
...
}
buttonone.addEventListener( 'click', addListOne, false);
Your code is expecting addListOne to be called with 4 parameters, when addListOne is called by the click event only 1 parameter is passed and it is the event.
Therefor you need to find the list yourself with a document.getElementById.
Giving the code
var buttonone=document.getElementById('add-item-1');
var buttontwo=document.getElementById('add-item-2');
var compareB=document.getElementById('compare');
var resetB=document.getElementById('reset');
//function to add items to first list
function addListOne(event){
var newText = document.getElementById('item-field-1').value;
var newListItem= document.createElement('li');
newListItem.appendChild(document.createTextNode(newText));
var listOne = document.getElementById('list-one-item');
listOne.appendChild(newListItem);
}
buttonone.addEventListener( 'click', addListOne, false);
Seen running at https://jsfiddle.net/s5xzazL1/5/