function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Abi V 4Abi V 4 

Uncaught TypeError: Cannot read property 'style' of null

I am trying to show the field based on onclick of the radio button.
Id is coming and not able to display it  and facing the  Uncaught TypeError: Cannot read property 'style' of null error.
 <script type="text/javascript">
            function Disablefilter(var1){
                alert(var1)//id is showing in alert.
                     document.getElementById(var1).style.display=display;

          }

let me know where i am missing the logic.Suggest me how to enable the field onclick of radio button using javascript.
          </script>
 
Best Answer chosen by Abi V 4
SandhyaSandhya (Salesforce Developers) 
Hi,

I suppose you are writing VFPage.

Then something like below will work.
  
With javascript


<apex:page >
 <head>

 </head>
 <apex:form >
  <script>
  function HideMsg(istrue)
  {
    var checkval = document.getElementById("msg")
    if(istrue.checked )
    {   
        var checkval = document.getElementById("msg").style.display='block';
    }
    else
    {
        var checkval = document.getElementById("msg").style.display='none';
    }
  }
  </script>
  <apex:pagemessages />

  <div>
   <apex:inputCheckbox id="checkbox" onchange="HideMsg(this);"/>
  </div>
  <div class="showp" style="display: none" id="msg">
  <p>HI!</p>
  </div>
 </apex:form>
</apex:page>

Thanks and Regards
sandhya
 

All Answers

SandhyaSandhya (Salesforce Developers) 
Hi Abi,

The valid options for display are "block", "inline", "none", "table", etc...

Please replace your code
                     document.getElementById(var1).style.display=display;
with

document.getElementById(var1).style.display='block';


Please accept my solution as Best Answer if my reply was helpful. It will make it available for other as the proper solution. If you felt I went above and beyond, you can give me kudos.
 
Thanks and Regards
Sandhya


 
Abi V 4Abi V 4
Hi Sandhya,
I have modified but still facing the same error.
Suggest me if there are any challenges here.
 
SandhyaSandhya (Salesforce Developers) 
Hi Abi,

please refer below code which works in the same way. 
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
    width: 500px;
    height: 500px;
    background-color: lightblue;
}
</style>
</head>
<body>

<p>Click the "Try it" button to set the display property of the DIV element to "none":</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

<script>
function myFunction() {
    document.getElementById("myDIV").style.display = "none";
}
</script>

</body>
</html>
Hope this will help you.

Thanks and Regards
sandhya.
 
SandhyaSandhya (Salesforce Developers) 
Hi Abi,

Here is a working example with Radio button. On load the input field is disabled when you click on radio button the input field will enable.

VFPage
----------- 
<apex:page standardController="contact" extensions="radioActionCtrl"  >
    <apex:form >
        <apex:selectRadio >
            <apex:actionSupport event="onchange" action="{!changeInputState}" rerender="opPanelName"/>
            <apex:selectOption itemValue="" itemlabel="Option1"/>
        </apex:selectRadio>       
        <apex:outputPanel id="opPanelName">
            <apex:inputField value="{!contact.firstName}" id="NameInput" required="false"/>
            <script>
                document.getElementById('{!$Component.NameInput}').disabled = {!disableInput};
            </script>
        </apex:outputPanel>            
    </apex:form>
</apex:page>

Controller
----------------
  
public class radioActionCtrl {
    public Boolean disableInput {get; set;}
    public radioActionCtrl(ApexPages.StandardController controller) {
        disableInput = true;
    }    
    public void changeInputState(){
        disableInput = false;
    }
}

Please accept my solution as Best Answer if my reply was helpful. It will make it available for other as the proper solution. If you felt I went above and beyond, you can give me kudos.
 
Thanks and Regards
Sandhya

 
Abi V 4Abi V 4
Hi Sandhya

This example will work to disable the field on click of the button but not show the field.
More over it will work based on controller response ,but I m trying to approach with client side 
Iike JavaScript event not with actionsupport.
Thanks for your references.
SandhyaSandhya (Salesforce Developers) 
Hi,

I suppose you are writing VFPage.

Then something like below will work.
  
With javascript


<apex:page >
 <head>

 </head>
 <apex:form >
  <script>
  function HideMsg(istrue)
  {
    var checkval = document.getElementById("msg")
    if(istrue.checked )
    {   
        var checkval = document.getElementById("msg").style.display='block';
    }
    else
    {
        var checkval = document.getElementById("msg").style.display='none';
    }
  }
  </script>
  <apex:pagemessages />

  <div>
   <apex:inputCheckbox id="checkbox" onchange="HideMsg(this);"/>
  </div>
  <div class="showp" style="display: none" id="msg">
  <p>HI!</p>
  </div>
 </apex:form>
</apex:page>

Thanks and Regards
sandhya
 
This was selected as the best answer
Abi V 4Abi V 4
Thank you so much!!It works for me.
I appreciate your response.
Abi V 4Abi V 4
Thank you so much!!It works for me.
I appreciate your response.