Develop Reference

Cannot get value of textarea with Shopify Product Options by Bold

I'm trying to get the value of a textarea with Shopify Product Options by Bold and it is currently not working. I am able to get the value of a textarea locally, but I can not get the value when I move the code over to Shopify. I have looked here and here to no avail.
Here's the relevant code:
document.getElementById("248832").onkeyup=function(){getVal()};
var textbox = document.getElementsByName("properties[Message Body]")[0].value;
and here's the textarea I'm trying to get the value of
<textarea data-option-key="ta_248832" id="248832" class="bold_option_child shapp_full_width " name="properties[Message Body]"></textarea>
When I try to run this on Shopify, I get an error saying "Uncaught TypeError: Cannot set property 'onkeyup' of null", although I did notice that at one point shopify runs the following jQuery code, which might be what's causing my problem:
<script>
jQuery('#248832').change(function (){conditional_rules(7437760391);})
</script>
I am trying to get the value of the textarea so I can run get the amount of words in said textarea.
Any help would be greatly appreciated!

Look to see if the element that is returned as null has loaded yet. Others in similar situations fixed this by loading the script last. Hope this is helpful :)
https://stackoverflow.com/a/25018299/1305878
https://stackoverflow.com/a/31333349/1305878
https://stackoverflow.com/a/23544789/1305878

Solution
You are trying to use something similar to jQuery methods without jQuery:
document.getElementById("248832").onkeyup=function(){getVal()};
while DOM elements don't have the onkeyup method. It should be
jQuery("#248832").on("keyup",function(){getVal()});
Extra notes
even without using the recommended '.on' method, you have to write it as
jQuery("#248832").keyup(function(){getVal()});
(docs), not as
jQuery("#248832").onkeyup(function(){getVal()});
If you'd like to use DOM methods, that would be
document.getElementById("248832").addEventListener("keyup",function(){getVal()});
Also, may be you have wrote this as a minimal example, but the fact that you only call getVal() and don't pass the value somewhere sounds strange, although I don't know if what getVal() does exactly.

onChange is not working IE8

I am dynamically creating a text area, based on the number of each user, comment for each user.
i am using the below code to do the same, it works fine in all the browser except IE8.
$(template1).find('textarea').attr({"id":'selfasgn'+aud.ASGN_ID,"onchange":'captureSelfComments('+aud.ASGN_ID+')'})
note that $(template1) is clone of one of the element in node.
template1 = reviewTemplate.clone(true);
function captureSelfComments(p_asgnid){
alert('caling captureSelfComments');
}
I tried below code, but its getting called when this element gets constructed or appened to the DOM. so i removed it.
$(template1).find('textarea').live('change',captureSelfComments(aud.ASGN_ID))
am I doing anything wrong here ?

For IE, try propertychange() as described here since IE may not always support the change event.
var lowIE = /msie (6|7|8)/gi.test(window.navigator.userAgent);
$(template1).find('textarea').live(lowIE ? 'propertychange' : 'change',captureSelfComments(aud.ASGN_ID));
Generally, it is not a good idea to do user agent sniffing but we are talking about IE... which is basically also not a good idea, generally :)

alternate option for getElementById in JS?

I have a MVC app.
I have written JS code below in the "Create" view. The code below code works perfectly in Google chrome and Mozilla Firefox; but it's not working in IE 8.
$('#PaymentType').change(function(){
var ptype=document.getElementById("PaymentType").value;
});
So I changed it to the code below and it works... on IE 8 as well
$('#PaymentType').change(function(){
var ptype = $(this).val();
});
Now, the problem is that I am not going to use getElementById anymore...
What if I want to get the values from another control? Which alternate option is there available to getElementById?

You just use $('#otherId').val() to get the value.
Also on a side note in your second code example you could've just used var ptype = this.value;

If you're using jQuery you don't need to use document.getElementById anymore.
I would be interested to know why it doesn't work though, it looks like it should.

Javascript function calling form element is not working in IE8

function HandleFileButtonClick(val)
{
var ss=val.name;
var n=ss.split("choiceimgs");
alert(n[1]);
document.forms["addpoll"]["choiceimg" + n[1]].click();
}
In the above coding it holds the variable value upto n[1]. The alert shows a number. If the line works then it will click a file input and the browser window will open.
This works fine in chrome, but in IE8 is not working. How to write the above line in IE8. And also document.forms['addpoll']['choiceimg'+i].style.display='';
this line also not working in my page. I tried the whole day to fix this. But I can't find any solution. Anyone can help me to solve this issue. Thanks in advance

Because no examples are available I assume that the code line
document.forms["addpoll"]["choiceimg" + n[1]].click();
points to a form field. If so then you have to change it into follows:
document.forms["addpoll"].elements["choiceimg" + n[1]].click();
I am not sure to 100 perscent that the concatenation of .click() is correct, though the change to
document.forms['addpoll'].elements['choiceimg'+i].style.display='';
By the way I recommend the explicit use of value none and display, so you can exclude a source of error.

Adding an input field to the dom and focusing it in IE

I am trying to make a div, that when you click it turns into an input box, and focuses it. I am using prototype to achieve this. This works in both Chrome and Firefox, but not in IE. IE refuses to focus the newly added input field, even if I set a 1 second timeout.
Basically the code works like this:
var viewElement = new Element("div").update("text");
var editElement = new Element("input", {"type":"text"});
root.update(viewElement);
// pseudo shortcut for the sake of information:
viewElementOnClick = function(event) {
root.update(editElement);
editElement.focus();
}
The above example is a shortened version of the actual code, the actual code works fine except the focus bit in IE.
Are there limitations on the focus function in IE? Do I need to place the input in a form?

My guess is that IE hasn't updated the DOM yet when you make the call to focus(). Sometimes browsers will wait until a script has finished executing before updating the DOM.
I would try doing the update, then doing
setTimeout("setFocus", 0);
function setFocus()
{
editElement.focus();
}
Your other option would be to have both items present in the DOM at all times and just swap the style.display on them depending on what you need hidden/shown at a given time.

What version IE? What's your DocType set to? is it strict, standards or quirks mode? Any javascript errors appearing (check the status bar bottom left for a little yellow warning sign) ? Enable error announcing for all errors via Tools > Options > Advanced.
Oisin

The question is already answered by 17 of 26. I just want to point out, that Prototype has native mechanism for this: Function.defer()