title: Javascript Get Element by Id and set the value
body: <p>I have a javascript function to which I pass a parameter. The parameter represents the id of an element (a hidden field) in my web page. I want to change the value of this element.</p>
  
  <pre><code>function myFunc(variable){
    var s= document.getElementById(variable);
    s.value = 'New value'
  }
  </code></pre>
  
  <p>When I do this, I get an error that the value cannot be set because the object is null. But I know the object is not null because I see it in the html code generated by the browser.
  Anyways, I tried the following code to debug</p>
  
  <pre><code>function myFunc(variable){
    var x = variable;
    var y  = 'This-is-the-real-id'
    alert(x + ', ' + y)
    var s= document.getElementById(x);
    s.value = 'New value'
  }
  </code></pre>
  
  <p>When the alert message shows up, both parameters are the same, but I still get the error. But everything works fine when I do</p>
  
  <pre><code>  var s= document.getElementById('This-is-the-real-id');
    s.value = 'New value'
  </code></pre>
  
  <p>How can I fix this please</p>
  
  <p>EDIT</p>
  
  <p>The element for which I am setting the value is  hidden field and the id is det dynamically, as the page loads. I have tried added this in the $(document).ready function but did not work</p>