'Uncaught TypeError: Cannot set properties of null (setting 'value')

Hello i need help on fixing this java script issue on my website i read all post on stack overflow and google but it doesn't seem to help me .I am getting error Uncaught TypeError: Cannot set properties of null (setting 'value')

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>

<div class="elementor-element elementor-element-bc48325 elementor-align-center elementor-widget elementor-widget-button" data-id="bc48325" data-element_type="widget" data-widget_type="button.default">
            <a href="#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjExMzIiLCJ0b2dnbGUiOmZhbHNlfQ%3D%3D" class="elementor-button-link elementor-button elementor-size-sm" role="button" id="Social-media-manager">
                        <span class="elementor-button-text">Apply Now</span>
                    </a>
        </div>



//Popup form
<form class="elementor-form" method="post" name="New Form">
            <input type="hidden" name="post_id" value="1132"/>
            <input type="hidden" name="form_id" value="2c8531ad"/>
            <input type="hidden" name="referer_title" value="Careers" />
            <input type="hidden" name="queried_id" value="1304"/>

            <label for="form-field-name" class="elementor-field-label elementor-screen-only">Name</label>
            <input size="1" type="text" name="form_fields[name]" id="form-field-name" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="Name*" required="required" aria-required="true">
            
            <label for="form-field-field_1fc9713" class="elementor-field-label elementor-screen-only">Job Title*</label>
            <input size="1" type="text" name="form_fields[field_1fc9713]" id="form-field-field_1fc9713" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="Job Title*" required="required" aria-required="true">
                                            
            <label for="form-field-email" class="elementor-field-label elementor-screen-only">Email*</label>
            <input size="1" type="email" name="form_fields[email]" id="form-field-email" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="Email*" required="required" aria-required="true">
                                            
            <label for="form-field-message" class="elementor-field-label elementor-screen-only">Message</label>
            <textarea class="elementor-field-textual elementor-field  elementor-size-sm" name="form_fields[message]" id="form-field-message" rows="4" placeholder="Message" required="required" aria-required="true"></textarea>                </div>
            <input type="file" name="form_fields[field_501fb76][]" id="form-field-field_501fb76" class="elementor-field elementor-size-sm  elementor-upload-field" multiple="multiple">
                        
            <button type="submit" class="elementor-button elementor-size-sm">Apply now</button>
                
        
        </form>


<script>
var Social_media_manager = document.getElementById('Social-media-manager');

Social_media_manager.onclick = function(){
    document.getElementById('form-field-field_1fc9713').value = 'New value';
};
</script>

    </body>
</html>

this is simplified code of the website . There is a button called Apply now ones pressed it will call popup form called New form . with my JavaScript i am trying auto fill "form-field-field_1fc9713" but it always returns me this error . Website is made on WordPress using elementor and i am using custom code function placed at the bottom

javascripthtmlwordpresselementor


Solution 1:[1]

If You copy-paste your code to an HTML file it will work fine and the input will be populated with the 'new value' your problem is the popup form. you call

document.getElementById('form-field-field_1fc9713')

before form created and will return null. please call this line after popup creation

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yasser S.

Related Questions