javascript - 使用onclick事件时如何加载html内容?

标签 javascript html onclick buttonclick

我正在做一个小的随机项目,但遇到了问题。我正在使用 onclick 按钮事件来组织不同主题的图片。但是,当我尝试将代码放入 .innerHTML 部分时,它会破坏代码并且无法工作。难道我做错了什么?这是我的代码

    <!DOCTYPE html>
<html>
<head>
<script>
function Function1() {
    document.getElementById("demo").innerHTML = "<img>imagelinkgoeshere</img>"
    }
</script>
</head>
<body>

<button style="width:100px;font-size:20px;font-family:Playball;color:#910000;background-color:rgba(0,0,0,0);border:solid 0px #fff" onclick="Function1()">Theme1</button>

<p id="demo">Photos appear here</p>

</body>
</html>

显然,会有更多的按钮,因此会有更多的主题,但我只是向您展示保持整洁的基础知识。难道我做错了什么?我是否需要另一个 Javascript 代码或输出才能完成这项工作?谢谢。

最佳答案

您的图像 HTML 错误。图像的语法是

<img src="imagelinkgoeshere">

所以函数应该是:

function Function1() {
    document.getElementById("demo").innerHTML = '<img src="imagelinkgoeshere">';
}

关于javascript - 使用onclick事件时如何加载html内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32102999/

相关文章:

javascript - 实时搜索(键入时动态过滤结果)- Bootstrap、jQuery

html - 主体宽度和行内 block 元素

html - css中带有曲线的固定 Angular 对 Angular 线

javascript - IE 7 中的 onclick 事件问题

javascript - 检查 ng-model 中的数据是否为数字

javascript - 如何在不显示秒数的情况下使用 .toLocaleTimeString()?

javascript - JavaScript 可以向 Web 容器 Servlet 发送 HTTP 请求吗?

html - 缩小窗口时文本和图像困惑

jquery - 禁用 jquery 的 onclick 事件

java - 在 Activity 类 android.view.ContextThemeWrapper 中找不到 onClick 处理程序的方法