Fatal编程技术网
  • javascript/
  • Javascript 单击按钮/form submit后，CSS样式表不会'；不出现

Javascript 单击按钮/form submit后，CSS样式表不会'；不出现

javascript html css

Javascript 单击按钮/form submit后，CSS样式表不会'；不出现,javascript,html,css,Javascript,Html,Css,单击“使用”按钮后，当我检查页面时，源代码显示style.css页面消失，并且没有应用任何样式。我不明白为什么会这样 我的index.html页面如下所示： <!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></t

单击“使用”按钮后，当我检查页面时，源代码显示style.css页面消失，并且没有应用任何样式。我不明白为什么会这样

我的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>
我的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;
    })
}


const useBtn=document.querySelector（'.submit'）；
const reloadBtn=document.querySelector（'.btn\uuu reload'）
document.body.style.fontfamine=“Roboto；”
useBtn.addEventListener（'click'，function（）{
让person=document.querySelector（'.fname'）.value；
document.write（`轮到${person}了！`）
写下（`他们能活多久？`）
让老年=`${Math.floor（（Math.random（）*10）+30）}
`
文献写作（老年）
写下（`他们的年薪是多少？`）
让工资=`${Math.floor（Math.random（）*10000）}
`
文件编写（工资）
写（`他们的职业生涯是什么`）
康斯特·乔布斯=[“水管工”、“医生”、“巫婆”、“总统”、“特朗普支持者”]
让job=Math.floor（Math.random（）*jobs.length）
document.write（作业[作业]）
redoBtn（）；
})
函数redoBtn（）{
让tryAgain=document.createElement（'按钮'）
document.body.appendChild（tryAgain）
让buttonText=document.createTextNode（'重试'）
tryAgain.appendChild（按钮文本）
tryAgain.addEventListener（'click'，function（）{
window.location.href=window.location.href；
})
}
非常感谢您的帮助

您的
文档。write
正在覆盖所有html，包括链接的样式表

发件人：

注意：当document.write写入文档流时，在关闭（加载）的文档上调用document.write会自动调用document.open，这将清除该文档

如果确实要使用
document.write
，则需要将样式表链接重写到新文档中。但是最好只是替换页面上某些容器元素的html，如
body
元素。

而不是使用document.write来覆盖html。您可以尝试以下方法：

    <input type="submit" value="Use" class="submit">

    <!-- add new div to show the result -->
    <div id="result"></div>

    <script src="app.js"></script>
在单击事件中：

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();

})

useBtn.addEventListener（'click'，function（））{
让person=document.querySelector（'.fname'）.value；
设res=document.getElementById（'result'）；
res.innerHTML=“轮到“+person+”了！”；
//在此处向innerHTML添加更多信息
//隐藏输入fname和提交按钮
redoBtn（）；
})