只有在按钮单击Javascript后才会显示图像_Javascript_Jquery_Html_Image

只有在按钮单击Javascript后才会显示图像

javascript jquery html image

只有在按钮单击Javascript后才会显示图像,javascript,jquery,html,image,Javascript,Jquery,Html,Image,我这里有一段代码，每天都会显示一个新的图像。它可以工作，但只有在单击按钮后才会显示图像。页面上的其余文本将消失。有没有一种方法可以在页面上同时显示照片和文字 <!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> &

我这里有一段代码，每天都会显示一个新的图像。它可以工作，但只有在单击按钮后才会显示图像。页面上的其余文本将消失。有没有一种方法可以在页面上同时显示照片和文字

<!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>


想看看照片吗？
图像显示
一些文本在这里一些文本在这里一些文本在这里一些文本在这里
点击这里！

在页面加载时调用loadList（）

调用

文档。write（）

将仅清除显示图像的当前文档。为什么不创建一个空的

标记并用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';

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

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

image.src = 'image/path';

作为loadList（）尝试此操作

在代码中添加了一些修改，请尝试此操作

 <!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>


想看看照片吗？
图像显示
一些文本在这里一些文本在这里一些文本在这里一些文本在这里

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

您可以使用

innerHTML

附加图像标记

var imlocation=“images/”；
函数ImageArray（n）{
这个长度=n；
对于（var i=1；i我不理解代码，但我认为您可以按照下面的代码执行：
<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>


标题
加载一个新的图像！
函数loadImage（）{
var target=document.getElementById（'image'）；
var数据=新日期（）；
var dati=data.getDate（）；
开关（dati）{
案例1：
target.src=“images/img.jpg”；
打破
案例2：
target.src=“images/img2.jpg”；
打破
//...
案例10：
target.src=“images/img10.jpg”；
打破
//........
}
}

你看了吗？@aldo_rainn很抱歉，我听不懂这个问题