CODEWITHSUNDEEP
javascripthtml
Cole Busby
Cole Busby

Reputation: 398

Why is this not working on Firefox, Chrome or Safari but on IE?

I'm a student and cannot wrap my head around why this isn't working.

function addedToCart(x)
            {
            alert( x.value + " has been added to cart\nPress OK to continue.");
            }


<a href="#" value="blue circle" onclick="addedToCart(this)">

Any help is appreciated!

Upvotes: 2

Views: 163

Answers (3)

RollRoll
RollRoll

Reputation: 8472

2 things value is not a native property from <a and you are not closing with </a>

I hope this code below will help you to understand one simular approach to make it work:

<script>
    function addedToCart(x) {
        alert(x.value + " has been added to cart\nPress OK to continue.");
    }
</script>

<a href="#" onclick="addedToCart(document.getElementById('txt1'))">blue circle</a>
<input type="text" id="txt1" value="some value"/>

IE has also it's own way to interpret html, it adds more bad than good because it enforces not having a pattern

Upvotes: 0

Jo&#227;o Silva
Jo&#227;o Silva

Reputation: 91349

Because value is not a valid attribute for an anchor <a>. It's intended to be used for form elements, such as input or select.

A more appropriate (and with valid markup) solution would be to use HTML5 data-* attributes, and then fetch it using getAttribute as suggested by @Jeffrey Sweeney:

<a href="#" data-value="blue circle" onclick="addedToCart(this)">

And then:

alert( x.getAttribute("data-value"))

Upvotes: 5

Jeffrey Sweeney
Jeffrey Sweeney

Reputation: 6124

Try using the getAttribute function:

alert( x.getAttribute("value") + " has been added to cart\nPress OK to continue.");

https://developer.mozilla.org/en-US/docs/DOM/element.getAttribute

Upvotes: 0

Related Questions