Question

我这里的代码每天都会显示一个新图像。它有效，但只有按钮点击后才会显示图像。页面上的其余文字消失了。有没有办法可以在页面上显示照片和文字？

<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>Want to see a picture?</h1>

<h2>Picture Display</h2>
</p><p>Some Text Here Some Text Here Some Text Here Some Text Here</p>
<button onclick="loadList()">Click Here!</button>
<script type="text/javascript"><!--
    var imlocation = "images/";
    function ImageArray (n) {
        this.length = n;
        for (var i =1; i <= n; i++) {
            this[i] = ' '
        }
    }
    image = new ImageArray(90);
    image[0] = 'CPR1.jpg';
    image[1] = 'CPR2.jpg';
    image[2] = 'CPR3.jpg';

    var currentdate = new Date();
    var imagenumber = currentdate.getDay();

    function loadList() {
        document.write('<img src="' + imlocation + image[imagenumber] + 
'">');
        style.display = "none";
    }

    //--></script>
</body>
</html>

Answer 1

document.write主要用于测试：如果在HTML文档完全加载后使用它，将删除所有现有HTML 。

您可以使用innerHTML附加图片标记

＆＃13;

var imlocation = "images/";

function ImageArray(n) {
  this.length = n;
  for (var i = 1; i <= n; i++) {
    this[i] = ' '
  }
}
image = new ImageArray(90);
image[0] = 'CPR1.jpg';
image[1] = 'CPR2.jpg';
image[2] = 'CPR3.jpg';

var currentdate = new Date();
var imagenumber = currentdate.getDay();

function loadList() {
  document.getElementById('insertPicture').innerHTML=('<img src="' + imlocation + image[imagenumber] +
    '">');

}

＆＃13;

<h1>Want to see a picture?</h1>

<h2 id='insertPicture'>Picture Display</h2>

<p>Some Text Here Some Text Here Some Text Here Some Text Here</p>
<button onclick="loadList()">Click Here!</button>

＆＃13;

Answer 2

在页面加载时调用loadList（）

Answer 3

调用document.write()将清除仅显示图像的当前文档。为什么不创建空的<img src="">代码并使用javascript填充src属性？

使用以下选项之一选择图像标记：

var image = document.getElementsByTagName("img")[0];
var image = document.getElementsByClassName("image-class")[0];
var image = document.getElementById("image-id");

然后使用以下内容设置图像：

image.src = 'image/path';

Answer 4

尝试使用loadList（）

   function loadList() {
        var img = document.createElement("img");
        img.src = imlocation + image[imagenumber];

        var body = document.getElementByTagname('body');
        body.appendChild(img);

    }

Answer 5

为您的代码添加了一些修改尝试此操作。

 <!DOCTYPE html>
    <html>
    <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>
    <body>
    <h1>Want to see a picture?</h1>

    <h2>Picture Display</h2>
    </p><p>Some Text Here Some Text Here Some Text Here Some Text Here</p>
      <img id="imageDaily"></img>
    <button onclick="loadList()">Click Here!</button>
    <script type="text/javascript"><!--
        var imlocation = "images/";
        function ImageArray (n) {
            this.length = n;
            for (var i =1; i <= n; i++) {
                this[i] = ' '
            }
        }
        image = new ImageArray(90);
        image[0] = 'CPR1.jpg';
        image[1] = 'CPR2.jpg';
        image[2] = 'CPR3.jpg';

        var currentdate = new Date();
        var imagenumber = currentdate.getDay();

        function loadList() {

          document.getElementById('imageDaily').src=imlocation + image[imagenumber];

        }

        //--></script>
    </body>
    </html>

Answer 6

我还没有理解代码，但我认为你可以像下面的代码一样：

<html>
<head>
    <title>
        title
    </title>
</head>
<body>
    <img src="" id="image" />
    <button onclick="loadImage()">
        Load a new image!
    </button>
    <script type="text/javascript">
        function loadImage () {
            var target = document.getElementById('image');
            var data = new Date();
            var dati = data.getDate();
            switch (dati) {
                case 1:
                target.src = "images/img.jpg";
                break;
                case 2:
                target.src = "images/img2.jpg";
                break;
                //...
                case 10:
                target.src = "images/img10.jpg";
                break;
                //........
            }
        }
    </script>
</body>

按钮单击Javascript后，仅显示图像

6 个答案: