Simple javascript suddenly not working

Question

UPDATE: THERE ARE 12 of these on one page. Only the last one works. They all have unique ID's and a unique function written for them though.

This simple function is working on my development site but not my live site for some reason. It is a wordpress install but they should be exactly the same setup. I haven't written additional functions or anything. Any ideas? I thought maybe a plugin was stopping it but after testing that hasn't been the case. I have no idea how to troubleshoot javascript using developer tools.

function quantChange() {
    d = document.getElementById("bwoo-quantity-187").value;
    document.getElementById("187").setAttribute('data-quantity',d);
}

Input being used

<select class='quantity' onchange='quantChange()' id='bwoo-quantity-187'>
    <option value=0>0</option>
    <option value=1>1</option>
    <option value=2>2</option>
    <option value=3>3</option>
    <option value=4>4</option>
    <option value=5>5</option>
    <option value=6>6</option>
    <option value=7>7</option>
    <option value=8>8</option>
    <option value=9>9</option>
    <option value=10>10</option>
</select>

Item I'm trying to change:

<form action="/order-now/a-la-carte/?add-to-cart=187" class="cart-nonmealplan" method="post" enctype="multipart/form-data">
    <button type="submit" id="187" data-product_id="187" data-product_sku="" data-quantity="1" class="add_to_cart_button button product_type_simple">Add to cart</button>
</form>

"I have no idea how to troubleshoot javascript using developer tools." -- I would start here https://developers.google.com/chrome-developer-tools/ — elclanrs, Jan 25 '14 at 22:16
In your developer tools, go to the Console tab and see if there are any errors that show. — Code Maverick, Jan 25 '14 at 22:16
`event.returnValue is deprecated. Please use the standard event.preventDefault() instead. ` That's the only error showing which also shows on the development site. — brs14ku, Jan 25 '14 at 22:17
You can not use `107` as an `id`. Also you forgot to declare your variables before using (won't cause much problems though.) — Derek 朕會功夫, Jan 25 '14 at 22:18
@brs14ku: You can ignore that one. What is your DOCTYPE? Try declaring `d` with `var`. Other than that, there's not much info in your 3 lines of code to know what's going on... — elclanrs, Jan 25 '14 at 22:18
According to the [HTML5 spec](http://stackoverflow.com/a/79022/283863), you cannot start an `id` with a number. — Derek 朕會功夫, Jan 25 '14 at 22:20
Tried declaring var d. Didn't change anything. Doctype = ` ` — brs14ku, Jan 25 '14 at 22:28
You should quote the option's value attributes. Also, `"bwoo-quantity-187" != "bwoo-quantity-107"` — Ilia Choly, Jan 25 '14 at 22:28
Sorry, they are quoted but for some reason in the Page source view they are not. — brs14ku, Jan 25 '14 at 22:32
Ilia those were pulled from two different parts of the page at different times. I'll edit the example. — brs14ku, Jan 25 '14 at 22:35

Rantiev · Accepted Answer · 2014-01-25T22:38:08.640

0

ID can't contain numbers as first symbol. May be the problem in that? http://jsfiddle.net/3zJDt/4/ See working example.

HTML

<select class='quantity' onchange='quantChange()' id='bwoo-quantity-187'>
    <option value=0>0</option>
    <option value=1>1</option>
    <option value=2>2</option>
    <option value=3>3</option>
    <option value=4>4</option>
    <option value=5>5</option>
    <option value=6>6</option>
    <option value=7>7</option>
    <option value=8>8</option>
    <option value=9>9</option>
    <option value=10>10</option>
</select>

<form action="/order-now/a-la-carte/?add-to-cart=187" class="cart-nonmealplan" method="post" enctype="multipart/form-data">
    <button type="submit" id="p187" data-product_id="p187" data-product_sku="" data-quantity="1" class="add_to_cart_button button product_type_simple">Add to cart</button>
</form>

<script>
function quantChange() {
    var d = document.getElementById("bwoo-quantity-187").value;
    document.getElementById("p187").setAttribute('data-quantity',d);
}    
</script>

edited Jan 25 '14 at 22:38

answered Jan 25 '14 at 22:31

Rantiev

1,869
1
22
46

That doesn't seem to have an effect on the development site. I'll look at tha tthough. – brs14ku Jan 25 '14 at 22:34
You have to understand difference, you shouldn't place code that you don't understand, to any of your websites dev or live. Problem is inside IDs, you need to set up elemen ID properly. – Rantiev Jan 25 '14 at 22:40
Thanks for the fiddle. Interestingly enough it still doesn't work. Does that mean some other script is interfering somehow? – brs14ku Jan 25 '14 at 22:48
Better solution is to have 1 function. that will get parameter. then function1() function2() funtion3() You can create one function updateCartQuantity(el) { document.getElementById("p" + el.value) //you can get value of youe select field here } – Rantiev Jan 26 '14 at 13:00
Nailed it finally. Thanks! – brs14ku Jan 26 '14 at 23:09

Simple javascript suddenly not working

1 Answers1