我已经使用内部CSS代码应用了样式，但是这些样式似乎没有应用于浏览器中的html网页。我已经排除了所有问题，但还是无法修复。奇怪的是，该样式也没有出现在检查元素中。我刚刚开始编码，所以我不知道问题是什么。这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stock Market Simulator</title>
<style>
body {
font-family: 'Roboto Mono', monospace;
color: #fff;
background-color: #000;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
margin: 0;
font-size: 36px;
}
section {
padding: 20px;
background-color: #222;
margin: 20px auto;
max-width: 600px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h2 {
margin-top: 0;
font-size: 24px;
color: #fff;
}
form {
max-width: 400px;
margin: 0 auto;
}
label {
margin-bottom: 10px;
font-size: 16px;
}
input[type="text"],
input[type="number"],
button {
margin-bottom: 20px;
padding: 12px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #333;
color: #fff;
transition: border-color 0.3s ease;
}
input[type="text"]:focus,
input[type="number"]:focus,
button:focus {
outline: none;
border-color: #007bff;
}
button {
cursor: pointer;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
padding: 12px 20px;
font-size: 18px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
#stockList {
list-style: none;
padding: 0;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Stock Market Simulator</h1>
<p>Your Balance: $<span id="balance">10000</span></p>
</header>
<section id="buySection">
<h2>Buy Stocks</h2>
<form id="buyForm">
<label for="stockInput">Stock Symbol:</label>
<input type="text" id="stockInput" placeholder="Enter Stock Symbol" required>
<label for="quantityInput">Quantity:</label>
<input type="number" id="quantityInput" placeholder="Quantity" required>
<button type="submit">Buy</button>
</form>
</section>
<section id="stockListSection">
<h2>Your Stocks</h2>
<ul id="stockList">
<!-- Bought stocks will be displayed here dynamically -->
</ul>
</section>
<section id="sellSection">
<h2>Sell Stocks</h2>
<form id="sellForm">
<!-- Sell stocks form will be generated dynamically by JavaScript -->
</form>
</section>
<footer>
<p>© 2024 Stock Market Simulator</p>
</footer>
<!-- JavaScript placeholder -->
<script src="script.js"></script>
</body>
</html>
'
'
这是我的 .js 代码
let balance = 10000;
let stocks = [];
// Function to fetch stock price using Alpha Vantage API
async function getStockPrice(symbol) {
try {
const apiKey = 'YOUR_API_KEY'; // Replace 'YOUR_API_KEY' with your actual Alpha Vantage API key
const response = await fetch(`https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${symbol}&apikey=${apiKey}`);
const data = await response.json();
// Extract the latest stock price from the API response
const latestPrice = parseFloat(data['Global Quote']['05. price']);
return latestPrice;
} catch (error) {
console.error('Error fetching stock price:', error);
return null;
}
}
function buyStock(event) {
event.preventDefault(); // Prevent form submission
const stockSymbol = document.getElementById("stockInput").value.toUpperCase();
const quantity = parseInt(document.getElementById("quantityInput").value);
getStockPrice(stockSymbol).then(stockPrice => {
const totalCost = stockPrice * quantity;
// Check if the user has enough balance to buy stocks
if (totalCost <= balance) {
balance -= totalCost;
updateBalance();
updateStockList(stockSymbol, quantity, stockPrice);
populateSellDropdown(); // Update the sell dropdown after buying stocks
} else {
alert("Insufficient balance!");
}
});
}
function sellStock(event) {
event.preventDefault(); // Prevent form submission
const stockSymbol = document.getElementById("sellStockInput").value.toUpperCase();
const quantity = parseInt(document.getElementById("sellQuantityInput").value);
const stockIndex = findStockIndex(stockSymbol);
if (stockIndex !== -1 && quantity <= stocks[stockIndex].quantity) {
getStockPrice(stocks[stockIndex].symbol).then(stockPrice => {
const totalSaleAmount = stockPrice * quantity;
balance += totalSaleAmount;
updateBalance();
updateStockListAfterSale(stockIndex, quantity);
});
} else {
alert("You either entered an invalid stock symbol or don't have enough stocks to sell!");
}
}
function updateBalance() {
document.getElementById("balance").innerText = balance.toFixed(2);
}
function updateStockList(symbol, quantity, price) {
const stockList = document.getElementById("stockList");
const listItem = document.createElement("li");
listItem.textContent = `${quantity} shares of ${symbol} at $${price.toFixed(2)} each`;
stockList.appendChild(listItem);
// Add the bought stock to the stocks array
stocks.push({ symbol: symbol, quantity: quantity, price: price });
}
function updateStockListAfterSale(stockIndex, quantitySold) {
const stockList = document.getElementById("stockList");
const stockItem = stockList.childNodes[stockIndex];
const currentQuantity = stocks[stockIndex].quantity;
if (quantitySold === currentQuantity) {
stockList.removeChild(stockItem);
stocks.splice(stockIndex, 1);
} else {
stocks[stockIndex].quantity -= quantitySold;
stockItem.textContent = `${stocks[stockIndex].quantity} shares of ${stocks[stockIndex].symbol} at $${stocks[stockIndex].price.toFixed(2)} each`;
}
}
function populateSellDropdown() {
const sellDropdown = document.getElementById("sellStockInput");
sellDropdown.innerHTML = ""; // Clear previous options
stocks.forEach((stock, index) => {
const option = document.createElement("option");
option.value = stock.symbol;
option.textContent = `${stock.quantity} shares of ${stock.symbol}`;
sellDropdown.appendChild(option);
});
}
function findStockIndex(symbol) {
for (let i = 0; i < stocks.length; i++) {
if (stocks[i].symbol === symbol) {
return i;
}
}
return -1; // Stock symbol not found
}
document.getElementById("buyForm").addEventListener("submit", buyStock);
document.getElementById("sellForm").addEventListener("submit", sellStock);
我已尝试根据 stack 和 chatgpt 进行故障排除步骤，但没有任何帮助
我测试了代码，效果很好。这种情况通常发生在过时的浏览器或浏览器中的某些内容阻止了它的情况下。如果您尝试使用外部 css 文件作为样式并将其链接到代码中，如下所示，这可能会有所帮助
`
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<title> Your website name </title>
</head>
`
通常你这样做只是为了让你的代码更干净，我的代码以前做过类似这样奇怪的事情，它只有在像这样的单独文件中时才有效，反之亦然。