因此，我正在尝试使用JavaScript函数返回图像。我希望用户输入" ART"或" Travel"，然后根据其输入返回两个图像之一。我不是程序员，这是我要为我的基本技术课之一做的事情，所以我真的是菜鸟，老实说，我不了解我读过的一些行话其他答案。如果有人可以用简单的话阐明我对我做错了什么，我将非常感谢。这是我编写的代码：它不断告诉我，有一个带有返回部分的索兰塔克斯术语，它告诉我我的功能未定义。
谢谢！
<h3>Please indicate whether you would like to see a collage of art that I have made, or a collage of pictures made of places I have visited (please type "Art" or "Travel"):</h3>
<input id="answer"> <!---start of first function (html)-->
<button type="button" onclick="myFunction()">Submit</button>
<!--end of first function (html)-->
<script> <!---start of first function (javascript)-->
function myFunction() {
var x, text;
x = document.getElementById("answer").value;
if (x == Art) {
return <a href="http://imgur.com/21cHFIU"><img src="http://i.imgur.com/21cHFIU.png" title="source: imgur.com" /></a>
}else {
return <a href="http://imgur.com/3UFIhPG"><img src="http://i.imgur.com/3UFIhPG.png" title="source: imgur.com" /></a>
}
}
</script> <!---end of first function (javascript)-->
下面的注释不在JavaScript评论语法中：
<script> <!---start of first function (javascript)-->
在脚本标签中，您必须使用这样的评论：
//start of first function (javascript)
而不是：
if (x == Art)
您必须使用引号，因为Art是字符串，而不是JavaScript关键字。而是这样做：
if (x == "Art")
您在这里返回一个非JavaScript变量：
return <a href="http://imgur.com/21cHFIU"><img src="http://i.imgur.com/21cHFIU.png" title="source: imgur.com" /></a>
因此，您必须使用这样的引号：
return '<a href="http://imgur.com/21cHFIU"><img src="http://i.imgur.com/21cHFIU.png" title="source: imgur.com" />'</a>
这应该起作用。
<h3>Please indicate whether you would like to see a collage of art that I have made, or a collage of pictures made of places I have visited (please type "Art" or "Travel"):</h3>
<input id="answer">
<button type="button" onclick="myFunction()">Submit</button>
<img id="image" src="" />
<script>
function myFunction() {
var x = document.getElementById("answer").value;
var image = document.getElementById("image");
if (x == 'Art') {
image.src = 'http://i.imgur.com/21cHFIU.png';
}else {
image.src = 'http://i.imgur.com/3UFIhPG.png';
}
}
</script>
您需要返回字符串然后渲染，您当前正在返回无效的语法。
另一个选项是在您的标记中使用IMG标签，然后更改按钮提交时的src属性。
<h3>Please indicate whether you would like to see a collage of art that I have made, or a collage of pictures made of places I have visited (please type "Art" or "Travel"):</h3>
<input id="answer"> <!---start of first function (html)-->
<button type="button" onclick="myFunction()">Submit</button>
<img id="image" src="" title="source: imgur.com" />
<!--end of first function (html)-->
<script> <!---start of first function (javascript)-->
function myFunction() {
var image = document.getElementById("image");
var answer = document.getElementById("answer").value;
if (answer === "Art") {
image.src = "http://imgur.com/21cHFIU";
} else if (answer === "Travel") {
image.src = "http://imgur.com/3UFIhPG";
}
}
</script> <!---end of first function (javascript)-->
好吧，让我们尝试向您解释您的代码出了什么问题。
1-在这里，您应该将string与文本进行比较。因此，您需要说 art 是文字中的文字： 'Art'。
if (x == Art) {
2-您不应将文本返回到按钮事件。话虽这么说，您正在尝试从function返回的string有一些问题。这是您获得的Uncaught SyntaxError的原因。因此，正确的方法是：
'<a href="http://imgur.com/21cHFIU"><img src="http://i.imgur.com/21cHFIU.png" title="source: imgur.com" /></a>'
3-最后，未定义您的功能，因为<script>标签必须包裹在<head>或<body>标签中。最好是在各自关闭标签之前。
我纠正了这些问题，并为其工作做了一些更改。您可以通过单击运行代码段按钮进行检查。
function myFunction() {
var img = document.getElementById('img');
var answer = document.getElementById('answer').value.toLowerCase();
if (answer != 'art' && answer != 'travel') { //check if user input is "art" or "travel"
alert('Please, type "Art" or "Travel"');
} else {
if (answer == 'art') {
img.src = 'http://i.imgur.com/21cHFIU.png';
} else {
img.src = 'http://i.imgur.com/3UFIhPG.png';
}
}
}<h3>Please indicate whether you would like to see a collage of art that I have made, or a collage of pictures made of places I have visited (please type "Art" or "Travel"):</h3>
<input id="answer">
<!---start of first function (html)-->
<button type="button" onclick="myFunction()">Submit</button>
<br /><br /><br />
<image id="img" src="" />