[FIXED] how to get_option from backend to front-end

Issue

I am developing a plugin and I want to add in the backend a Checkbox that when clicked hides and element in the Front End.

My problem is how to use get_option properly because I really cannot figure it out and I am stuck in this position for 2 days and I have tried everything I know but I am a total begginer in PHP and plugin development, my main languages are HTML/css/js and I am really bad with dynamic content as a whole.

So, my code look like this:

function vsuc_page_html() { ?>
<div class="wrap vsuc-wrapper">
    <form method="post" action="options.php">
        <?php settings_errors() ?>
        <?php settings_fields('vsuc_option_group'); ?>
        <input type="checkbox" id="vsuc_checkbox1" name="vsuc_checkbox1" value="style1" 
        onclick="check_css()" checked >

The checkbox works, I see changes in the console, but I see an error that the class that I am calling from front-end is not defined: (header_title is not defined)

const header_title = document.getElementById("header_title");
function check_css() {
    header_title.style.display = "none";
}

This is only my last try, I have tried with add event listeners, with If and Boolean, but all i know is JS and no php.

Someone please shine some light on this because I know it is not that complicated but I cannot find any answer anywhere.

Solution

Try to use options page generator (you can only take form bit and register option if already have option page registered for your plugin). https://jeremyhixon.com/tool/wordpress-option-page-generator/

Don't use onclick there to manipulate front end.
Find header_title in your .php template and wrap it in

$titleCheck = get_option( 'title_option_name' );  
if ($titleCheck) {
THIS IS WHERE YOU RENDER YOUR TITLE FIELD
}

Answered By - NipponDEV

Answer Checked By - Senaida (PHPFixing Volunteer)