I have a page with a lots of buttons from PHP output with each buttons having different values:

<button class='add' value=".$row['cat_no']." onClick='addItem(value)'>Add To Cart</button>

$row['cat_no'] is data from mysql. 

I want to check the button's value when I click it, so I use native JS below:

<script>
function addItem(value) {
            alert("this.value");}
</script>

It is not working...it just return this.value. In this case I don't think it is suitable to assign Id to getElementbyId, Pls help to check my mistake or suggest solution. Thanks.

Pls: I dont want to use JQUERY, just native JS.

I have a page with a lots of buttons from PHP output with each buttons having different values:

<button class='add' value=".$row['cat_no']." onClick='addItem(value)'>Add To Cart</button>

$row['cat_no'] is data from mysql. 

I want to check the button's value when I click it, so I use native JS below:

<script>
function addItem(value) {
            alert("this.value");}
</script>

It is not working...it just return this.value. In this case I don't think it is suitable to assign Id to getElementbyId, Pls help to check my mistake or suggest solution. Thanks.

Pls: I dont want to use JQUERY, just native JS.

• javascript

• 1 onClick='addItem(this.value)' and alert(value) – Satpal Commented Jun 11, 2017 at 11:05
• Dont qoute the value instead.. use alert(value); – alil rodriguez Commented Jun 11, 2017 at 11:06

3 Answers 3

Use alert(elmt.value); like below. you should pass this to the function

<button class='add' value="test value" onClick='addItem(this)'>Add To Cart</button>

<script>
function addItem(elmt) {
            alert(elmt.value);
            }
</script>

the code below helps you retrieve the value of the element that triggered the event:

<button class='add' value="test value" onClick='addItem(this)'>Add To Cart</button>

<script>
  function addItem(sender) {
        alert(sender.value);
  }
</script>

However, this is filled with code smells.

I would suggest doing the code below

    <button id='add-to-cart' class='add' value="test value">Add To Cart</button>

On a separate JS file:

(function() {
    function _onLoad() {
        var addToCartButton = document.getElementById("add-to-cart");

         addToCartButton.addEventListener("click", _onAddToCartClicked);
    }

    function _onAddToCartClicked() {
        var sender = this;

        alert(sender.value);
    }

    document.addEventListener("DOMContentLoaded", _onLoad, false);
})();

This approach ensures that:

1. Concerns are separated between HTML and JS
2. External JavaScript file would be cached which results to faster page load time.
3. UI would render faster since there are no inline scripts
4. Global namespace won't be polluted

You don't really need this in your function, just use value. And also remove double quotes, because you need to alert function's parameter, not string, like this:

function addItem(value) {
  alert(value);
}

Here is the working example:

function addItem(value) {
  alert(value);
}

<button class='add' value="yourValue" onClick='addItem(value)'>Add To Cart</button>

Or you can pass the element to function using this, and then get the needed attribute value from addItem method:

function addItem(item) {
  alert(item.value);
}

<button class='add' value="yourValue" onClick='addItem(this)'>Add To Cart</button>