Assign Value to Variable from Front End (Playing with Lesson 8 teachings)

[CoinAdopter]

Hello,
Lesson 8 taught me how to create a front end and interact with a smart contract deployed to the HardHat blockchain. Per Patrick's teachings, I was able to communicate with my smart contract from the front end. I am trying to figure out how to assign a value to a Dapp variable from the front end with Ethers.JS.
For example, the contract in the Constructor states that two variables (person1 and person2) are equal to the parameters _person1 and _person2.

Constructor(address _person1, address payable _person2)
{
person1 = _person1;
person2= _person2;
}

So, how do I through ethers.JS tell the contract that person1= a certain wallet address ?
My understanding is that I first connect my wallet to the hardhat network, which I've already done. The contract has to be deployed in the same network, which is already done. Then my app connects to the wallet with the following code, which is already done and working properly.

async function connect() {
if (typeof window.ethereum !== "undefined!") {
await window.ethereum.request({ method: "eth_requestAccounts" });
connectButton.innerHTML = "Connected!";
} else {
console.log("Disconnected from Metamask!");
connectButton.innerHTML = "Please install Metamask";
}
}

Then I connect to the deployed smart contract and I tried the below to get the value from the front end...but don't know how to inject that into the deployed smart contract....any help or example you can point me to?

async function initContract() {
const person1 = document.getElementById("walletPerson1").value; //this grabs wallet number entered in the wallet input
const person2 = document.getElementById("walletPerson2").value; //this grabs wallet number entered in the wallet input

console.log(The Person1's wallet is ${person1});
console.log(The Person2's wallet is ${person2});

if (typeof window.ethereum !== "undefined!") {
const provider = new ethers.providers.Web3Provider(window.ethereum); //allows connection with Metamask
const signer = provider.getSigner(); //provides signer (i.e. metamask account)
const contract = new ethers.Contract(contractAddress, abi, signer);

try {
  const transactionResponse = await contract.initContract(); **_//HERE IS WHERE I NEED HELP. HOW DO I SEND THE WALLET ADDRESS ENTERED IN THE FRONT END AND ASSIGN IT TO A VARIABLE IN THE SMART CONTRACT THAT'S ALREADY DEPLOYED?_**
  console.log(transactionResponse);
} catch (error) {
  console.log(error);
}

}
}

[krakxn]

What is it exactly that you want to do? (Please clarify what I can help you with)

[CoinAdopter]

Basically, I want the front end to allow a user, enter a wallet address, and save that in a variable in the contract. Then, as functions are executed in the contract, in order for those to work, through modifiers, the function will only execute if the signer is the same as the originally entered wallet address.
Makes sense?

[CoinAdopter]

Here goes clearer information. I am trying to console.log the value of the public variable. How would that be done with Ethers.js?
I found this link below in stackexchange but it doesn't work for me. Any thoughts?

https://ethereum.stackexchange.com/questions/99565/how-to-read-public-variable-from-contract-using-ethers-js

[krakxn]

So,

const transactionResponse = await contract.initContract()

You want to assign a different value to the initContract variable inside contract?

[krakxn]

"How would you do this? And the follow up question is how would you change the bool state to true ?" An accessor method (getter function) for the boolean variable, that way you can setup a conditional. If the function's conditionals pass, let the variable be true; else, false.

And you simply just store the output from the accessor method in a variable in your script, from which you can use it to integrate with the front-end.

Maybe something like this:

Have an onclick function in your button which runs the mutator function to change the text in your script file.

Also,

xyzButtonElement.innerText = "Hey there"

[CoinAdopter]

Actually, initContract() is a function and this function’s output depends on two variables’ state changing to True. I’d like to console log in the front end (ie. Browser dev tools) the current bool state of the variable. Let’s say the variable is called “person1”. How would you do this? And the follow up question is how would you change the bool state to true ? Thanks so much !

…

On Sun, Aug 21, 2022 at 7:50 PM AN ❦ ***@***.***> wrote: So, const transactionResponse = await contract.initContract() You want to assign a different value to the initContract variable inside contract? — Reply to this email directly, view it on GitHub <#1934 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AVUM5XO5O4OWZUMRM5CD7OLV2LFGVANCNFSM57DJ6KLA> . You are receiving this because you commented.Message ID: <smartcontractkit/full-blockchain-solidity-course-js/repo-discussions/1934/comments/3443095 @github.com>