onclick how to change the text within span

From your makup, doing

$(document).on("click", "img", function() {    
    $("span").text("Click I agree")
});

which is the same as

$("img").onClick(funtion() {
    $("span").text("Click I agree")
})

would work

But it would change the text on all spans when an image is clicked on a webpage.

To select the exact span with a specific image, you could specify an ID to the <a> link like so,

<li>
    <a class="" id="home" ><img src="homelogo.jpg" style=" cursor:pointer; width:40px; height:40px;" /></a>
    <span>Home</span>
</li>

Then you could do

$(document).on("click", "#home img", function() {      
    $("#home").next().text("Click I agree")
});

It gets easier if the span also has its own ID, you could just select that specific ID and change the text.

Read
JQuery API selectors[^]
JQuery Events[^]
JQuery .next()[^]