html attribute value to be passed as an argument for a javascript function

Question

I have the following html input attribute which I would like to pass its value as an argument to the function placeBid()

<input type = "number" name = "bidAmount" placeholder = "Bid Amount" required >

and this is where I would like to pass it:

<input type = "submit"  name = "submit" value = "PLACE BID" onclick="placeBid(bidAmount.value)">

any help on what I should put in the parameter?

Answer 1

You need to define an id for the input. and pass the id through onclick, like:

<input type = "number" name = "bidAmount" id= "bid-amount" placeholder = "Bid Amount" required >

<button type="button" onclick="placeBid('bid-amount')">Submit</button>

and get the value with javascript inside your function:

<script>
function placeBid(id){
    var value = document.getElementById(id).value;
    ...
}
</script>

Answer 2

Use an event listener instead.

EventTarget.addEventListener()

<input type = "number" name = "bidAmount" id="bidAmount" placeholder = "Bid Amount" required >

<input type = "submit"  name = "submit" id="placeBidBtn" value = "PLACE BID">

const bidAmount = document.getElementById("bidAmount");
const placeBidBtn = document.getElementById("placeBidBtn");

const placeBid = () => {
  console.log(bidAmount.value);
  // Place bid code here.
};

placeBidBtn.addEventListener("click", placeBid, false);