jQuery not updating SOME spans

Question

I am building a web-based tool for the role-playing game GURPS. Data is maintained in several XML files that are loaded into arrays. Based on changes the user makes, data is re-populated into various spans, inputs and dropdowns from the arrays. No problem so far.

To give the user more feedback, I have a added an anchor that does a hover pop-up that shows the details of the current weapon. For the initial coding, these values were hard-coded while I worked out the rendering issues. Still no problems yet.

Now I am trying to actually populate the hover pop-up with real data. I can not get it to load the real data into the span! I have debugged the function and am certain that I have extracted the data I want. I have used similar lines of code to populate other parts of the web page.

Specifics: I want to replace the "aa" in the span below:

<span id="weaponName1" name="weaponName1" class="weaponName">aa</span><img src="Images/Firearms/Makarov_Suppressed.jpg">

The code I am using to try to re-populate the span is:

function loadWeaponStats(person, weaponID) {
// Load stats of the current weapon into the "Details" anchor fly-out
for (xx1=0; xx1<WeaponsArray.length; xx1++) {
    if (weaponID == WeaponsArray[xx1][0]) {
        weaponName = WeaponsArray[xx1][1];
        alert("weaponName: "+weaponName+"\nperson: "+person);
        $("#weaponName"+person).val(weaponName);
        xx1 = WeaponsArray.length;  // Kill the loop
    }
}

}

The alert() is simply to confirm that I have the correct data. The following line should re-populate the span, but it does not.

All HTML, CSS & JavaScript can be found at GURPS Combat Calculator

Pulling out what little hair I have left.

Thanks

Answer 1

You can also do as below:

     $("#weaponName"+person).text(weaponName);

you can't use Val() method here.