I have two functions that I’m trying to combine but having issues with it properly rendering and (more importantly) functioning as expected on the page. I suspect it’s a syntax issue, but I’m new to coding so I could very well be making a newbie mistake.
Fyi – function1 is displaying/working as expected by itself on page1. Function2 is working displaying as expected on page 2 when I have just that function within the script tag(s) and separately have the input tags below within the head/body tags. The issue I’m encountering is when I try to combine [i.e.- nest]the 2 functions on a single page while also pulling the input tags from function2 into the innerHTML of the newly-nested function(s).
Currently, a user can enter an address into the addy2 field and it will auto-complete via an integrated API call (which works perfectly on it’s own/as is); my goal is to retain the auto-complete functionality but also give the user the option to click either radio button 1 or radio button 2 and have either the 1st address or the 2nd address (respectively) populate in the addy2 text field. Is this possible to do?!?
function numeroUno() {
const {
addy1: e,
addy2: t
} = appState;
document.getElementById("content").innerHTML = `n <h1>Title Placeholder</h1>n <div>n <label for="addy1">Address 1</label>n <input type="text" id="addy1" value="${e}" required>n </div>n <div>n <label for="addy2">Address 2</label>n <input type="text" id="addy2" value="${t}" required>n </div>n <button id="calc-btn">Calculate</button>n `, initAutocomplete()({
calcBtn: calcDist
})
}
function numeroDos(radioButtonId, textFieldId, textToPopulate) {
// Get the radio button and text field elements
const radioButton = document.getElementById(radioButtonId);
const textField = document.getElementById(textFieldId);
// Select the radio button
radioButton.checked = true;
// Populate the text field
textField.value = textToPopulate;
document.getElementById("content").innerHTML = `n <div class="mb-4">n <input type="text" id="addy1">n <input type="radio" id="radio1" name="myRadio" onclick="numeroDos('radio1', 'addy1', '123 address st, City, ST, Zip')">n <label for="radio1">Radio 1</label>n <input type="radio" id="radio2" name="myRadio" onclick="numeroDos('radio2', 'addy1', '456 address st, City, ST, Zip')">n <label for="radio2">Radio 2</label>n </div>n `
}
Hope that all makes sense. Thank you in advance for any/all help!