基本 HTML JavaScript function 未按预期工作

Question

I'm wandering if anyone can help. Im doing some rather basic JS for a project but I'm an idiot and not sure how to do this element.

I've used an opensource word highlighting program i've found online which works when i input a string to be highlighted, but when i input "input_id.value" which is a working (tested) value of an input box, The highlighter doesnt work. I thought it could be that it's not updating ie it only runs once so it will try to highlight no value as nothing has been inputted.

This is the code snippet:

<script type="text/javascript" src="../Resources/hilitor.js"></script>
<script type="text/javascript">

var input = document.getElementById("input_id").value;

    // global variable
    var myHilitor;
    document.addEventListener("DOMContentLoaded", function() {
        myHilitor = new Hilitor();
        myHilitor.apply("fox");
    }, false);


</script>

This works correctly and higlights "fox" as shown in this image.

However when i change

myHilitor.apply("fox");

to

myHilitor.apply(input_id.value);

nothing is highlighted at all. I tried putting the whole thing into a function like an idiot but that also doesnt work

<script type="text/javascript" src="../Resources/hilitor.js"></script>
<script type="text/javascript">
function searchFunction(){
    var input = document.getElementById("input_id").value;

    // global variable
    var myHilitor;
    document.addEventListener("DOMContentLoaded", function() {
        myHilitor = new Hilitor();
        myHilitor.apply("fox");
    }, false);
}

</script>

The function is called by

<button onclick="searchFunction()" class="button"></button>

I'm truly dumbfounded, any help would be very appreciated. Thankyou:)

Thanks all for the helpful contributions, Problem is solved I'm waiting to be able to accept answer

Answer 1

document.addEventListener("DOMContentLoaded", function() { causes a function to run when the DOMContentLoaded event happens (which is about when </html> is parsed as the document loads).

You haven't shown how searchFunction is called, but odds are that it is when a button is clicked.

That will happen after the DOMContentLoaded event has occurred so the condition for the function running never happens.

Don't include that condition.

Answer 2

Your variable is called var input but you're using input_id here myHilitor.apply(input_id.value) ;

Answer 3

You have declared var input = document.getElementById("input_id").value; .

But while calling myHilitor.apply(input_id.value); you are passing input_id.value . You should pass just input .

Like myHilitor.apply(input);