JavaScript Overriding HTML

JavaScript Overriding HTML

本文关键字：HTML Overriding JavaScript      更新时间：2023-09-26

所以我已经能够在我的问题上取得一些进展，但遇到了一些意想不到的/令人困惑的事情。我已经能够将我的脚本添加到我的网页，但是，两者不能一起工作。如果没有脚本，页面显示为我想要的样子。使用该脚本，脚本将运行并覆盖web页面。结果是屏幕左上角出现了一张随机图片，但是html文件中没有任何内容出现。我已经包括了我所有的代码(html, javascript, css)，如果有人能提供一些指导，那将是非常感激的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link href="mplstyles.css" rel="stylesheet" type="text/css" />
    <title>Monroe Public Library</title>
</head>
<body>
    <div id="pageContent">
        <div id="head">
            <img src="mpl.jpg" alt="Monroe Public Library" />
      </div>
        <div id="links">
            <ul class = "nav">
            <span>Quick Links</span>
            <li><a href="#">Home Page</a></li>
            <li><a href="#">Online Catalog</a></li>
            <li><a href="#">Friends of MPL</a></li>
            <li><a href="#">New Books and Other Good Reading</a></li>
            <li><a href="#">Ohio Virtual Library</a></li>
            <li><a href="#">Internet Public Library</a></li>
            <li><a href="#">Services and Collection</a></li>
            <li><a href="#">Adult Programs</a></li>
            <li><a href="#">Teen Central</a></li>
            <li><a href="#">Children's Room</a></li>
            <li><a href="#">Computers at MPL</a></li>
            <li><a href="#">Computer Rules and Procedures</a></li>
            <li><a href="#">Staff Directory</a></li>
            <li><a href="#">Library Records</a></li>
            </ul>
        </div>
        <div id="main">
        <h2>Library Records</h2>
            <p>To view the library records, enter your username and password.</p>
            <form id="login" method="post" action="">
                <p>
                    <label for="username" class="center" id="input"> Username:</label>
                    <input type="text" id="username" name="username" size="20" />
                </p>
                <p>
                    <label for="password" class="center" id="input"> Password:</label>
                    <input type="password" id="password" name="password" size="20" />
                </p>
                <p>
                    <label for="captcha" id="input">As a final security check, enter the 5 numbers you see displayed below.</label>
                    <input type="text" id="captcha" name="captcha" size="6" />
              </p>
              <p id="login">&nbsp;</p>
              <p id="login">
              </p>
              <script src="mpl.js"></script>
          <p align="center"><img src="" alt="" name="number1" width="70" height="100" id="number1"><img src="" alt="" name="number2" width="70" height="100" id="number2"><img src="" alt="" name="number3" width="70" height="100" id="number3"><img src="" alt="" name="number4" width="70" height="100" id="number4"><img src="" alt="" name="number5" width="70" height="100" id="number5"></p>
                <div id="images">
  </div>
                <p align="center">
                    <input type="submit" value="View Library Records" />
                </p>
            </form>
        </div>
        <div id="address">
            <span class="addressBold">Monroe Public Library</span>
            580 Main Street, Monroe, OH &nbsp;&nbsp;45050
            <span class="addressBold">Phone</span>(513) 555-0211
            <span class="addressBold">Fax</span>(513) 555-0241
        </div>
    </div>
</body>
</html>
window.onload = function ()
{
        //http://www.java-scripts.net/javascripts/Random-Image-Script.phtml
        var pictureNumbers=new Array()
        //specify random images below. You can have as many as you wish
        pictureNumbers[1]="0.jpg"
        pictureNumbers[2]="1.jpg"
        pictureNumbers[3]="2.jpg"
        pictureNumbers[4]="3.jpg"
        pictureNumbers[5]="4.jpg"
        pictureNumbers[6]="5.jpg"
        pictureNumbers[7]="6.jpg"
        pictureNumbers[8]="7.jpg"
        pictureNumbers[9]="8.jpg"
        pictureNumbers[10]="9.jpg"
        var randomNumber = Math.floor(Math.random()*pictureNumbers.length)
        if (randomNumber==0)
        {
            randomNumber=1
            document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
        }
        else if (randomNumber==1)
        {
            document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
        }
        else if (randomNumber==2)
        {
            document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
        }
        else if (randomNumber==3)
        {
            document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
        }
        else if (randomNumber==4)
        {
            document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
        }
        else if (randomNumber==5)
        {
            document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
        }
        else if (randomNumber==6)
        {
            document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
        }
        else if (randomNumber==7)
        {
            document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
        }
        else if (randomNumber==8)
        {
            document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
        }
        else if (randomNumber==9)
        {
            document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
        }
        else if (randomNumber==10)
        {
            document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
        }
    }

@charset "UTF-8";
/* CSS Document */
body
{
    margin-top:0;
    font-family:Georgia, "Times New Roman", Times, serif;
    background-color:#FFC;
}
#head
{
    background-color:orange;
}
#page
{
    width: auto;
    margin" 0 auto;
    background-color: white;
    border-top: none;
}
#links
{
    position:absolute;
    width:10em;
    border: 1px solid blue;
    top: 72px;
    background-color: white;
}
#main
{
    margin-left: 12em;
}
#login
{
    padding-top: 1em;
    padding-left: 2em;
    padding-bottom: 5em;
    border: 1px solid blue;
}
#address
{
    padding-top: 2em;
    padding-left: 2em;
    border-top: 1px solid blue;
}
#pageContent #main h2 {
    color: #00F;
}
#input
{
    background-color: orange;
    padding-right: 20%;
}

你的问题是document.write。你应该创建一个元素并将其附加到DOM中的父元素，或者更改现有元素的src属性。

创建元素并添加

var parent = document.getElementById("parent"),
    img = document.createElement("img")
img.setAttribute("src","your-file-name.jpg")
parent.appendChild(img)

这是你正在做的一个简化的例子。

小提琴: http://jsfiddle.net/L3WYH/1/

HTML 

<div id="picture-frame"></div>

JS 

var pictureNumbers = [],
    pictureCount = 10
for ( var i = 1; i <= pictureCount; i++ )
    pictureNumbers[i] = i + ".jpg"
var randomNumber = Math.ceil(Math.random()*(pictureNumbers.length - 1)),
    element = document.getElementById("picture-frame"),
    image = document.createElement("img")
image.setAttribute("src", pictureNumbers[randomNumber])
element.appendChild(image)

扩展@Gary对原始帖子的评论:

对document.write(...)的调用导致了您的问题。触发'onload'事件后，浏览器关闭文档进行写入。任何后续对document.write的调用都将覆盖整个页面。

要解决这个问题，需要做以下两件事之一:

  1. 呼叫窗外document.write。onload事件

  2. 按照@MBottens在他的回答中提到的那样做，在那里您将新的<img>元素附加到DIV标签。

相关文章：