单击按钮/表单提交后，不会出现 CSS 样式表
[英]After a button is clicked/form submit, the CSS stylesheet doesn't appear
问题描述
After the use button is clicked, the sources when I inspect the page show that the style.css page goes away, and no styles are applied.
单击使用按钮后，我检查页面时的来源显示 style.css 页面消失，并且没有应用 styles。 I can't figure out why this is happening.我不知道为什么会这样。
My index.html page looks like this:我的 index.html 页面如下所示：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&family=Roboto:wght@100;300;400;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" placeholder="First name" class="fname">
<input type="submit" value="Use" class="submit">
<script src="app.js"></script>
</body>
</html>
And my app.js is this:我的 app.js 是这样的：
const useBtn = document.querySelector('.submit');
const reloadBtn = document.querySelector('.btn__reload')
document.body.style.fontFamily = "Roboto;"
useBtn.addEventListener('click', function(){
let person = document.querySelector('.fname').value;
document.write(`<h2>It's ${person}'s turn!</h2>`)
document.write(`<h4>How long will they live?</h4>`)
let oldAge = `<p>${Math.floor((Math.random() * 10)+ 30)}</p>`
document.write(oldAge)
document.write(`<h4>What will be their yearly salary?</h4>`)
let salary = `<p>${Math.floor(Math.random() * 10000)}</p>`
document.write(salary)
document.write(`<h4>What will be their career</h4>`)
const jobs = [ 'plumber', 'doctor', 'witch', 'president', 'trump supporter']
let job = Math.floor(Math.random() * jobs.length)
document.write(jobs[job])
redoBtn();
})
function redoBtn(){
let tryAgain = document.createElement('button')
document.body.appendChild(tryAgain)
let buttonText = document.createTextNode('Try Again')
tryAgain.appendChild(buttonText)
tryAgain.addEventListener('click', function(){
window.location.href = window.location.href;
})
}
Any help is so appreciated!任何帮助都非常感谢！
2 个解决方案
解决方案1
1 2020-06-17 13:47:22
Your document.write is overwriting all your html, including your linked stylesheet.您的document.write正在覆盖您的所有 html，包括您的链接样式表。
Fromhttps://developer.mozilla.org/en-US/docs/Web/API/Document/write :从https://developer.mozilla.org/en-US/docs/Web/API/Document/write ：
Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document.
If you really want to use document.write , you'll need to rewrite your stylesheet link into the new document.如果您真的想使用document.write ，您需要将样式表链接重写到新文档中。 But it might be better to just replace the html of some container element on your page, like the body element.但是最好只替换页面上某些容器元素的 html，例如body元素。
解决方案2
0 2020-06-17 13:59:45
Instead of using document.write which overwrites your html you could try this approach:而不是使用覆盖您的 html 的 document.write 您可以尝试这种方法：
<input type="submit" value="Use" class="submit">
<!-- add new div to show the result -->
<div id="result"></div>
<script src="app.js"></script>
And in the click event:在点击事件中：
useBtn.addEventListener('click', function(){
let person = document.querySelector('.fname').value;
let res = document.getElementById('result');
res.innerHTML = "<h2>It's "+person+"'s turn!</h2>";
// add further information to innerHTML here
// hide input fname and submit button
redoBtn();
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.