我即将完成我的代码，但我陷入了最后一个小障碍。我希望代码允许用户输入链接，然后当他们单击按钮时，页面通过修改 img src 来附加实际图像。我还希望它通过使用无序列表来附加图像。
这是我所拥有的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Images Reveal</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script>
window.onload = alert('Welcome to my assignment 2!')
$(document).keypress(function(e) {
if (e.which == 13) {
alert('Please submit text via button');
}
});
var string = "";
function imageReveal() {
var rubberDuckie = document.getElementById("textInput");
var imageReveal = rubberDuckie.value;
if (imageReveal == "") {
alert("Please enter some text!");
} else {
var li = document.createElement("li");
rubberDuckie.innerHTML = "<img src=" + rubberDuckie + " />";
var ul = document.getElementById("listItUp");
ul.appendChild(li);
}
rubberDuckie.value = "";
}
</script>
</head>
<body style="background-color:yellow;">
<div align="center">
<header>
<h1>Alan Sylvestre</h1>
</header>
<input type="text" id="textInput" size="50" placeholder="Enter Some Text">
<input type="button" id="clicking" value="Add Image" onclick="imageReveal()">
</div>
<ul id="listItUp">
</ul>
<p id="pTags">
</p>
</div>
</body>
最佳答案
您正在尝试将图像插入到输入中(不能使其成为空元素)。只需将图像插入到 li 中即可。
li.innerHTML = "<img src=\"" + imageReveal + "\">";
关于javascript - 使用innerHTML修改img src，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16043755/