add input in custom javascript from WordPress pages/posts

Question

I've a script that I run on each page on my WordPress blog, but it has different input each time.

I have for a example a hint button: The hint button needs to be different on each page.

function answerbutton() {
    document.getElementById("answer").innerHTML = 'Readers will see this text as a hint';
}

What I do now is copy the script to a location and change the value. And load the script from a different location.

https://domainname/page2/hint1

What I'd like to do is have the script grab some sort of text box on the page editor page. I can use a different input on all pages yet it loads the same text.

I had something in mind like this:

<textarea =id"textarea">
function answerbutton() {
    document.getElementById("answer").innerHTML = 'ID="textarea"';
}

But I cannot get it to work.. my javascript skill is zero. Could someone help me to the right way? Or give me 'hints'?
Is there a WordPress plugin that can do this for example?

This is what I added to the loop? I guess the index.php:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<p><?php the_content(__('(more...)')); 
$hint1_of_this_page = get_post_meta( get_the_ID(), 'hint1', true );
$hint2_of_this_page = get_post_meta( get_the_ID(), 'hint2', true );
$hint3_of_this_page = get_post_meta( get_the_ID(), 'hint3', true );
$hint4_of_this_page = get_post_meta( get_the_ID(), 'hint4', true );
$answerbutton_of_this_page = get_post_meta( get_the_ID(), 'answerbutton', true );
$correctanswervalidate = get_post_meta( get_the_ID(), 'correctanswervalidate', true );
?></p>
<hr> <?php endwhile; else: ?>

Thhis is what I added to the footer.php:

 <script type="text/javascript">
function answerbutton() {
    document.getElementById("answer").innerHTML = '<?php echo $answerbutton_of_this_page; ?>';
}
</script>
<script type="text/javascript">
function hintbutton() {
    document.getElementById("hint1").innerHTML = '<?php echo $hint1_of_this_page; ?>';
}
</script>
<script type="text/javascript">
function hintbutton2() {
    document.getElementById("hint2").innerHTML = '<?php echo $hint2_of_this_page; ?>';
}
</script>

and this is how I use the custom field:

Answer 1

What you need its either a custom field or a meta box, you can search there are plenty of tutorials for creating both being the custom field the simpler one, you can read about it here, first you have to see the custom fields, for that you need to open the screen options and check the custom field checkbox, this in your page/post edit screen:

then you can start creating your custom fields, they can be added for posts and pages, in here you can see i created one called 'hint':

then you can use retrieve it, like this (inside the loop):

<?php
// Start the loop.
while (have_posts()) : the_post();
    the_content();

    //here we retrieve the value and save it in a var to use it later
    $hint_of_this_page = get_post_meta( get_the_ID(), 'hint', true );


 // End the loop.
 endwhile;
 ?>

then use it like this in your front-end code (in the footer i guess):

<?php global $hint_of_this_page; ?>
function answerbutton() {
    document.getElementById("answer").innerHTML = '<?php echo $hint_of_this_page; ?>';
}

it will show like this:

Answer 2

In this example it grabs the "value" of the hidden input field, and opens an alert box. You can use the variable mytext however you like in the real world.

Instead of using the tag like I have below, you'd put the document.ready() function in your site javascript file.

<div class="container">

<input type="hidden" id="someid" value="Your text here">
<button class="somebutton">Click me!</button>

<script>
(function($) {
    $(document).ready(function(){

        $( '.somebutton' ).click( function(e) {
            var mytext = $( '#someid' ).val();
            alert(mytext);

        });

    });
})( jQuery );
</script>

</div>