How to set values for Solidity contract state variables from JavaScript front-end?

Question

I am trying to set values to the following contract public state variables from a frontend javascript code. But it seems not working.

Contract public state variables:

// Current state of the auction.
address public highestBidder;
uint public highestBid;

In the below Javascript code, I get the values for address and amount from UI and assign to highestBidder & highestBid. But it seems not working. How do I do this?

// Submit bid details, triggered by the "Bid" button
SimpleAuction.prototype.startAuction = function() {
    console.log("inside startAuction");
    var that = this;
    console.log("inside startAuction");
    // Gets form input values
    var address = $("#enter-address").val();
    var amount = $("#enter-amount").val();
    console.log(amount);

    // Validates address using utility function
    if (!isValidAddress(address)) {
        console.log("Invalid address");
        return;
    }
    that.highestBidder = address;
    
     
    // Validate amount using utility function
    if (!isValidAmount(amount)) {
        console.log("Invalid amount");
        return;
    }
    that.highestBid = amount;

This code fixed the issue. Passing address and amount as a transaction object in the bid() function in JS

// Submit bid details, triggered by the "Bid" button
SimpleAuction.prototype.startAuction = function() {
    console.log("inside startAuction");
    var that = this;
    console.log("inside startAuction");
    // Gets form input values
    var address = $("#enter-address").val();
    var amount = $("#enter-amount").val();
    console.log(amount);

    // Validates address using utility function
    if (!isValidAddress(address)) {
        console.log("Invalid address");
        return;
    }
     
    // Validate amount using utility function
    if (!isValidAmount(amount)) {
        console.log("Invalid amount");
        return;
    }
    
    
    // Calls the public `bid` function from the smart contract
    this.instance.bid(
         {  
            from: address,
            value: amount,
            gas: 100000,
            gasPrice: 100000,
            gasLimit: 100000
        },
       
        function(error, txHash) {
            if (error) {
                console.log(error);
            }
            // If success, wait for confirmation of transaction,
            // then clear form values
            else {
                that.waitForReceipt(txHash, function(receipt) {
                    if (receipt.status) {
                        $("#enter-address").val("");
                        $("#enter-amount").val("");
                    } else {
                        console.log("error");
                    }
                });
            }
        }
    );
};

Answer 1

You're trying to update the state of the contract and in this case it is required that you have to sign transaction. Take a look at web3 sendTransaction method over here. When you take a look at the method you will notice parameter transactionObject include data string which is the function ABI of your smart contract method. You can get function abi by using encodeABI.

Then at your smart contract just by creating a variable the following way address public highestBidder; does not mean that this state variable can be updated. You have to create a setter method or include the setter method logic into another method, example:

function setHighestBidder(address _highestBidder) {
    highestBidder = _highestBidder;
}