Javascript Get Element by Id and set the value

Question

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   function myFunc variable     var s  document getElementById variable     s value    New value      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  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      When the alert message shows up  both parameters are the same  but I still get the error  But everything works fine when I do    var s  document getElementById  This-is-the-real-id      s value    New value    How can I fix this please  EDIT  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

User · Answer

lt html gt   lt head gt   lt script gt  function updateTextarea element    document getElementById element  innerText   document getElementById  ment   value     lt  script gt   lt  head gt   lt body gt    lt input type  text  value  Enter your text here   id    ment  style     border  1px solid grey  margin-bottom  4px      onKeyUp  updateTextarea  myDiv      gt    lt br gt    lt textarea id  myDiv   gt  lt  textarea gt    lt  body gt   lt  html gt

User · Answer

If myFunc variable  is executed before textarea is rendered to page  you will get the null exception error    lt html gt       lt head gt       lt title gt index lt  title gt       lt script type  text javascript  gt          function myFunc variable               var s   document getElementById variable               s value    new value                        myFunc  id1         lt  script gt       lt  head gt       lt body gt           lt textarea id  id1  gt  lt  textarea gt       lt  body gt   lt  html gt    Error message  Cannot set property  value  of null    So  make sure your textarea does exist in the page  and then call myFunc  you can use window onload or   document  ready function  Hope it s helpful

User · Answer

Given   lt div id  This-is-the-real-id  gt  lt  div gt    then  function setText id newvalue      var s  document getElementById id     s innerHTML   newvalue        window onload function        or window addEventListener  load  function       setText  This-is-the-real-id   Hello there        will do what you want    Given   lt input id  This-is-the-real-id  type  text  value    gt    then  function setValue id newvalue      var s  document getElementById id     s value   newvalue        window onload function       setValue  This-is-the-real-id   Hello there        will do what you want   x000D   x000D  function setContent id  newvalue    x000D    var s   document getElementById id   x000D    if  s tagName toUpperCase      INPUT   s value   newvalue  x000D    else s innerHTML   newvalue  x000D     x000D    x000D  window addEventListener  load   function     x000D    setContent  This-is-the-real-id-div    Hello there    x000D    setContent  This-is-the-real-id-input    Hello there    x000D     x000D   lt div id  This-is-the-real-id-div  gt  lt  div gt  x000D   lt input id  This-is-the-real-id-input  type  text  value    gt  x000D   x000D   x000D

User · Answer

For each element type  you can use specific attribute to set value  E g     lt div id  theValue1  gt  lt  div gt  window document getElementById  theValue1   innerText    value div     lt input id  theValue2  gt  lt  input gt  window document getElementById  theValue2   value    value input     You can try example here

User · Answer

Coming across this question  no answer brought up the possibility of using  setAttribute   in addition to  value    document getElementById  some-input   value  1337   document getElementById  some-input   setAttribute  value    1337      Though unlikely helpful for the original questioner  this addendum actually changes the content of the value in the pages source  which in turn makes the value update form reset  -proof   I hope this may help others    Or me in half a year when I ve forgotten about js quirks

User · Answer

I think the problem is the way you call your javascript function  Your code is like so    lt input type  button  onclick  javascript  myFunc myID   value  button   gt    myID should be wrapped in quotes

User · Answer

try like below it will work      lt html gt   lt head gt   lt script gt  function displayResult element    document getElementById element  value    hi      lt  script gt   lt  head gt   lt body gt    lt textarea id  myTextarea  cols  20  gt  BYE  lt  textarea gt   lt br gt    lt button type  button  onclick  displayResult  myTextarea    gt Change lt  button gt    lt  body gt   lt  html gt

[javascript] Javascript Get Element by Id and set the value

Examples related to javascript

Examples related to default-value