本文详解如何修复 chrome 扩展中 `
,改用语义化容器(如
),并确保事件监听健壮可靠。
以下是优化后的 HTML 结构(关键修改已高亮):
<html>
<head>
<title>Crypto Currency Converter</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ✅ 移除 <form> 标签,避免隐式 submit 行为 -->
<div class="converter-container">
<div class="convertFrom">
<select id="convertFrom">
<option value="ETH">ETH</option>
<option value="BTC">BTC</option>
<option value="SOL">SOL</option>
</select>
</div>
<div class="convertTo">
→
<select id="convertTo">
<option value="BTC">BTC</option>
<option value="ETH">ETH</option>
<option value="SOL">SOL</option>
<option value="USD">USD</option>
</select>
</div>
<div class="amountToConvert">
<input type="number" placeholder="0.05" id="amount" autofocus required>
</div>
<div class="convertButton">
<button type="button" id="convertButton">Convert</button>
</div>
</div>
<div id="result"></div>
<script src="popup2.js"></script>
</body>
</html>
对应 JavaScript 也建议增强健壮性: