Javascript / Jquery：将新文本分配给span对象时的奇怪行为

Question

This is driving me insane. This is part of a Laravel blade template but I'm not sure that's relevant.

Context

I have javascript code that is variable and server-side rendered based on the number of attendees for an event. The number of repeated fields, with pricing information, etc. is repeated n times.

I have a couple of dynamic updates that can occur based on user input which attempt to change 2 span objects:

1. Default Ticket Price (span ids: $("#tcost"+n) where n is a number from 1-5)
2. Subtotal (taking any discounts into account) (span ids: $("#final"+n)

Odd Behavior

I've verified that I can access the text/html contained within both spans with:

    tc = document.getElementById('tcost'+n)
    fc = document.getElementById('final'+n)

When I try to change the values I've attempted both:

    tc.innerHTML = 'whatever';  // setting fc.innerHTML didn't change it
    $('#final'+n).text('whatever');
    blah = $('#final'+n).text();

In both instances, the tc value changes just fine. But when I try to change the value in "final"+n using either format, it does not change on the screen.

HOWEVER , when I console.log(blah) I see the correct value.

Is there something esoteric I'm missing as to why the either of the above approaches to setting the text of the span to something would register as set but not display?

Answer 1

In the process of making the minimal, complete, verifiable example, I discovered the issue. Apologies.

And the answer was I had a function that was changing the value after the fact back to the value so it was appearing to not change. Ugh.