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.

firefox offsetWidth not reporting anything.

I'm trying to do some dynamic resizing using javascript. For part of this I need to report the current size of a container. I wrote a function to do this (below) and it works great in chrome... however in firefox the width does not get reported. I have had a read on the offsetWidth method and in theory it should work in firefox.
function currentBoxW() {
return document.getElementById("wrapper").offsetWidth;
}
All this reports is "NaN".
There is more in that function in the actual page, but all the additional code has been commented out for testing... this is the actual line that does the reporting.
Have I missed something or is there a smarter way to report width using JS and the DOM? Is there another way to get the width of a div?
Thanks.

You can have two problems:
Make sure you have explicity set the width of the element (wrapper) through CSS
Make sure javascript code is executing after document is ready.
window.onload() or something similar if you are using any other javascript libaries
If you can use jquery instead
you can easily get it using
$(document).ready(function(){
function currentBoxW() {
return $('#wrapper').width();
or
return $('#wrapper').innerWidth(); //depending on the requirement.
}
});

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.

Javascript getElementById - reading works, altering doesn't

So, I have this pretty complex ajax thing going.
It loads new html (including div tags and all) to show up on the page.
I included a 'more' link to load additional data.
This more link links to my javascript function. The 'more' link is located in a div, which I gave a unique id. The next time the load function is called, I use document.getElementById(the id).style.display="none"; to "remove" this div from the look of the page.
I set error traps for this, the div with that id is found without problems, but javascript fails to change my style property.
I tested alert(document.getElementById(the id).innerHTML); and that worked without problems - hence the title of the question.
So, does anyone have any ideas/do I need to offer more information? The main problem is that it doesn't throw any errors anywhere, yet it fails to complete the task I asked...
Here's a bit of code to go with it -
try
{
var myidthing = "morelink" + ContentStart.toString(); //the id is correct
var div = document.getElementById(myidthing);
if (!div)
{
}
else
{
div.style.display="none"; //this doesn't work, but doesn't raise an error
alert(div.innerHTML); //this works without problem
}
}
catch(theerr)
{
alert(theerr);
}
------------------------->EDIT<-------------------------
I'm incredibly sorry if I upset any people.
I'm also angry at myself, for it was a stupid thing in my code. Basically, I had a variable that stored the contents of a parent div. Then I (succesfully) removed the div using the removeChild() method. Then my code pasted the contents of that vaiable (including the div I wanted gone) back into the parent div.
I switched around the order and it works fine now.
Again, excuse me for this.

Throwing out a few ideas of things to look for:
You said the div is generated by javascript. Is it possible the div you are targeting is not the one you think you are? It could be you are targeting another div, which is already hidden, or obstructed... or maybe the innerHTML you are displaying goes with a different element than the one you intend to target. Put an alert or script breakpoint in the if(!div) case, also, and see if it's going down that path.
If the above code is only a stripped-down version of your actual code, check your actual code for typos (for example: style.display = "none;";)
Using the FireBug plugin for FireFox, inspect the target element after the operation completes, and make sure that the display: none appears in the style information. If not, use FireBug's debugger to walk through your javascript, and see if you can figure out why.
Use FireBug to break on all script errors, in case there is another error causing this behavior.

Try empty quotes instead of 'none' and see if that works?:
document.getElementById('element_id').style.display="";
Failing that, don't change the style, just add a class which hides the element.

Frustrating issue with JavaScript's getElementById()

This is the gallery I've been asked to implement
http://sandbox.leigeber.com/slideshow/
I've chopped and changed it ever so slightly so it'd fit into the new site's templating system a bit easier.
Whenever I run it, this line causes an error
ta=document.getElementById(thumbid);
Saying that ta is null. I know the thumbid var's value does exist as an Id of the unordered list.
I've tried to figure what's been going on for at least half an hour now, and can't seem to nail it!
Can someone please tell me what I'm doing wrong?

Yeah the code looks fine, and running the same lines from Firebug console work OK, so it makes me wonder if the thumbs element actually exists at the time of running? Is it in a document.ready-style handler? If it's being called before the element exists on that page, then ta will be null, which would create that error.

It looks like the slideshow function is called for initialization too early. This will be called before the DOM tree is ready:
var slideshow = function() {
...
} ();
try removing that () at the end.

Good news! jQuery is written in vanilla Javascript! You should be able to copy out their method for getting elements by ID and use that.

It's a little unclear what value thumbid should have, but it looks to me like your problem is that the li items in your unordered list don't have ids, they have values.
Calling document.getElementById('thumbs') works fine to get the ul element of the list itself.

In Safari 4 line 19 was throwing me a type error regarding ta which was null.
This is due to the line you pointed out where ta was assigned.
I like how you encapsulate the functions in a closure, but I think the window.onload can be changed to be more jQuery like; the same can be said of actually selecting the elements you're looking for, something like t=$('ul#thumbs li') should do the trick. I don't know if throwing a var in front of ta is going to fix anything, but it's worth a shot.