Solidity基础合约配套HTML脚本无作用，求技术解决方案

嘿，我看你在开发基础Solidity合约，还写了HTML做交互但没效果——结合你给的代码片段（还有没写完的HTML部分），我帮你梳理几个最容易踩的坑和完整的修复方案：

1. 先补全核心依赖：Web3.js库 #

你的HTML里大概率没引入Web3.js，这可是前端和以太坊合约交互的核心工具！赶紧在<head>里加上这段：

<script src="https://cdn.jsdelivr.net/npm/web3@0.20.7/dist/web3.min.js"></script>

为啥选v0.20.7？因为你的Solidity版本是^0.4.11，这个版本的Web3和旧版合约兼容性更好，避免新版本的语法冲突

2. 完整的交互脚本示例（补全你的HTML） #

我把你没写完的HTML补全了，还加上了钱包连接、合约实例化和交互逻辑，直接用就行：

<html>
<head>
<title>Blockchain</title>
<script src="https://cdn.jsdelivr.net/npm/web3@0.20.7/dist/web3.min.js"></script>
</head>
<body class="container">
<h3>Blockchain</h3>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active">
    <input type="text" id="nameInput" placeholder="输入要设置的名称">
    <button onclick="setName()">设置名称</button>
    <button onclick="getName()">获取当前名称</button>
    <p id="result" style="margin-top:15px;"></p>
</div>
</div>

<script>
// 页面加载时初始化Web3和合约
window.addEventListener('load', function() {
    // 检查用户是否安装了MetaMask这类钱包
    if (typeof web3 !== 'undefined') {
        window.web3 = new Web3(web3.currentProvider);
    } else {
        // 没钱包就提示用户安装
        document.getElementById('result').textContent = '麻烦先安装MetaMask钱包哦！';
        return;
    }

    // 这里是你的合约ABI（从Remix编译后复制过来的，对应你的sample合约）
    const contractABI = [
        {
            "constant": false,
            "inputs": [{"name": "_name", "type": "string"}],
            "name": "set",
            "outputs": [],
            "payable": false,
            "stateMutability": "nonpayable",
            "type": "function"
        },
        {
            "constant": true,
            "inputs": [],
            "name": "get",
            "outputs": [{"name": "", "type": "string"}],
            "payable": false,
            "stateMutability": "view",
            "type": "function"
        },
        {
            "constant": true,
            "inputs": [],
            "name": "name",
            "outputs": [{"name": "", "type": "string"}],
            "payable": false,
            "stateMutability": "view",
            "type": "function"
        }
    ];
    // 替换成你自己部署合约后的真实地址！
    const contractAddress = '0xYourDeployedContractAddress';

    // 实例化合约对象
    window.contract = web3.eth.contract(contractABI).at(contractAddress);
});

// 设置名称的函数
function setName() {
    const inputName = document.getElementById('nameInput').value;
    if (!inputName) {
        document.getElementById('result').textContent = '请输入名称再提交！';
        return;
    }
    // 调用合约的set函数，需要用户授权交易
    contract.set(inputName, function(error, txHash) {
        if (error) {
            document.getElementById('result').textContent = '设置失败：' + error.message;
        } else {
            document.getElementById('result').textContent = '交易已提交，哈希：' + txHash;
            // 等5秒让交易上链，再自动获取最新名称
            setTimeout(getName, 5000);
        }
    });
}

// 获取名称的函数
function getName() {
    // 调用合约的get函数（或者直接用contract.name()，因为name是public变量）
    contract.get(function(error, currentName) {
        if (error) {
            document.getElementById('result').textContent = '获取失败：' + error.message;
        } else {
            document.getElementById('result').textContent = '当前合约名称：' + currentName;
        }
    });
}
</script>
</body>
</html>

3. 还要排查这些常见问题 #

• 合约地址填错：一定要用部署合约后生成的地址，不是你创建合约的钱包地址！
• 网络不匹配：MetaMask的网络要和你部署合约的网络一致（比如本地Ganache、测试网Goerli）
• 交易授权：点击“设置名称”后，MetaMask会弹出授权窗口，一定要点确认，不然交易不会执行
• ABI错误：ABI要和你编译的合约完全对应，要是改了合约代码，记得重新生成ABI

对了，你的Solidity合约也可以小优化下：给set函数加上public修饰符（虽然默认是public，但显式写出来更清晰），另外其实get函数可以不用写，因为name是public变量，Solidity会自动生成一个同名的getter函数，直接调用name()就能获取值啦。

内容的提问来源于stack exchange，提问作者Cal W