Wordpress - 使用自定义帖子字段中的参数创建动态onclick重定向方法

To be honest, I'm not a guru of wordpress env. but I have to solve a certain problem. My template code is as follows:

<div class="section-one">
    <div class="section-one-container">
        <h1><?php the_title(); ?></h1>
        <?php the_excerpt(); ?>
        <div class="link">
            <a href="" target="_blank">Go to the presentation</a>
        </div>
    </div>
    <?php if(has_post_thumbnail())
        echo '<div class="image">';
        the_post_thumbnail('full');
        echo '</div>'; 
    ?>
</div>

I want to redirect user to the presentation page inside new browser tab once "Go to presentation" clicked. The problem is that I have to pass some parameters which are located in Wordpress Custom Fields and are different for each and every Wordpress post.

My idea was to create JS function which will be launched when using the HTML onclick method.

function gotoUrl(path, params, method) {
    //Null check
    method = method || "post"; // Set method to post by default if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    //Fill the hidden form
    if (typeof params === 'string') {
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", 'data');
        hiddenField.setAttribute("value", params);
        form.appendChild(hiddenField);
    }
    else {
        for (var key in params) {
            if (params.hasOwnProperty(key)) {
                var hiddenField = document.createElement("input");
                hiddenField.setAttribute("type", "hidden");
                hiddenField.setAttribute("name", key);
                if(typeof params[key] === 'object'){
                    hiddenField.setAttribute("value", JSON.stringify(params[key]));
                }
                else{
                    hiddenField.setAttribute("value", params[key]);
                }
                form.appendChild(hiddenField);
            }
        }
    }

    document.body.appendChild(form);
    form.submit();
}

The question is, what is the proper way to pass Custom Fields Values into goToUrl function? How to create JS params object with wordpress field values ? How to mix JS code with PHP code eg.:

const params = {
    color:  <?php the_field('color'); ?>,
    label: <?php the_field('label'); ?>,
    mode: <?php the_field('mode'); ?>
    ...
}

The main problem that you seem to face is handing out php data over to the JS file. The wp_localize function is exactly made for such cases. In your case, you need to first register the js file in functions.php and localize the variables as follows:

// Register the script
wp_register_script( 'some_handle', 'path/to/myscript.js' );
$custom_field = get_post_meta($postid,"meta_key",true); //get the custom field
// Localize the script with new data
$data = array(
    'some_value' => $custom_field
);
wp_localize_script( 'some_handle', '_object', $data );

// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );

You can then access the variables in php like this:

var value = _object.some_value;