The front end of the web page cannot display image updates?

[qwe231cvb]

Reproduction

When I deploy the smart contract on the polygon blockchain, the front end of the web page cannot update the image information after clicking the "attack" button on the web page. If I deploy the smart contract on the Sepolia test chain, after clicking the "attack" button on the web page, the image information cannot be updated. You can see the update of the picture. Why is there this difference?

System Info

smart contract file as follows：
// SPDX-License-Identifier: UNLICENSED
pragma solidity >=0.7.0 <0.9.0;
contract GameItems {
struct LowLevelPlateArmorFragments1 {
string name;
address owner;
uint index;
uint price;
}
LowLevelPlateArmorFragments1[] public LowLevelPlateArmorFragments;
uint nonce = 2;
address contract_owner;
uint LowLevelPlateArmorFragments_currentIndex = 0;
constructor() {
contract_owner = msg.sender;
}
event nameChanged_LowLevelPlateArmorFragments(string name);
function LowLevelPlateArmorFragments_addItem() public returns (string memory){
    if (LowLevelPlateArmorFragments_currentIndex <= 200000){
        nonce++;
        if (nonce > 20000)
        {
            nonce = 0;
        }
        address owner = msg.sender;
        uint price = 1;
        string memory name = "LowLevelPlateArmorFragments";
        LowLevelPlateArmorFragments.push(LowLevelPlateArmorFragments1(name, owner, LowLevelPlateArmorFragments_currentIndex, price));
        LowLevelPlateArmorFragments_currentIndex++; 
        emit nameChanged_LowLevelPlateArmorFragments(name);
        return name;
    }
    if (LowLevelPlateArmorFragments_currentIndex > 200000){
        nonce++;
        if (nonce > 20000)
        {
            nonce = 0;
        }
        for (uint p = 0; p < LowLevelPlateArmorFragments.length; p++){
            if (LowLevelPlateArmorFragments[p].owner == contract_owner){
                LowLevelPlateArmorFragments[p].owner = msg.sender;
                emit nameChanged_LowLevelPlateArmorFragments(LowLevelPlateArmorFragments[p].name);
                p = LowLevelPlateArmorFragments.length;
                return LowLevelPlateArmorFragments[p].name;
            }
        }
    }
    return "";
}
function getItemsCount() public view returns (uint) {
    return LowLevelPlateArmorFragments.length;
}
function getItem(uint index) public view returns (string memory, address, uint, uint) {
    LowLevelPlateArmorFragments1 memory item = LowLevelPlateArmorFragments[index];
    return (item.name, item.owner, item.index, item.price);
}
}

JavaScript file as follows：
window.addEventListener('load', async () => {
console.log("aaaaaaaaaaaaaaaaaaa");
if (window.ethereum) {
window.web3 = new Web3(ethereum);
try {
await ethereum.enable();
} catch (error) {
console.error("User denied account access");
}
} else if (window.web3) {
window.web3 = new Web3(web3.currentProvider);
} else {
console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
}
var Contract = new web3.eth.Contract(abi, contractAddress);
Contract.events.nameChanged_LowLevelPlateArmorFragments({}, function(error, event) {
    console.log("nameChanged_L");
    var itemName1 = event.returnValues.name;
    if (itemName1 == ""){
        console.log("null string");
    }
    if (error) {
        console.error(error);
    } else {
        console.log("nameChanged_LowLevelPlateArmorFragments event triggered", event);
        var itemName = event.returnValues.name;
        if (itemName == "LowLevelPlateArmorFragments") {
            document.getElementById('itemImage').src = "LowLevelPlateArmorFragments.jpg";
        }
    }
});
document.getElementById('attackButton').addEventListener('click', async function() {
    try {
        console.log("Attack button clicked");
        const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
        const fromAddress = accounts[0]; // Assuming the user has authorized at least one account
        await Contract.methods.LowLevelPlateArmorFragments_addItem().send({ from: fromAddress });
    } catch (error) {
        console.error(error);
    }
});
});

HTML file as follows：
<!DOCTYPE html>
<html>
<head>
    <title>Game Items</title>
    <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.0.0-beta.36/dist/web3.min.js"></script>
</head>
<body>
    <button id="attackButton">attack</button>
    <img id="itemImage" src="" alt="Item Image">
    <script src="a.js"></script>
</body>
</html>

Used Package Manager

npm

Expected Behavior

Even if the smart contract is deployed on the polygon blockchain, I would like to be able to see the image update on the front end,

Actual Behavior

The smart contract has been deployed on the polygon blockchain, and the JavaScript files and html files have been stored in the web server. When the attack button on the front end of the web page is clicked, why can't the web page update the image after metamask sends the transaction? If the contract is deployed on the sepolia test chain, the web page can successfully update the image after metamask sends the transaction? Why is there such a difference?

[pcattori]

This doesn't look like related to the Remix. Perhaps you are looking for Remix-IDE which is a separate project?