Question

所以我正在尝试使用JavaScript函数来返回图像。我希望用户输入“Art”或“Travel”，然后根据输入返回两个图像中的一个。我不是程序员，这是我正在尝试为我的一个基础技术课程做的事情，所以我真的很像菜鸟，说实话，我不理解我读过的一些术语其他答案。如果有人能用简单的语言说清楚我做错了什么，我真的很感激。这是我写的代码：它一直告诉我有一个带有返回部分的Uncaught SyntaxError，它告诉我我的函数没有被定义。

谢谢！

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

Answer 1

您需要返回一个字符串然后再渲染它，您当前返回的语法无效。

另一种选择是在标记中添加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)-->

Answer 2

以下评论不是Javascript评论语法：

<script> 

在script标签内部，您必须使用以下注释：

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

Answer 3

这应该有效。

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

Answer 4

好的，让我们试着向你解释你的代码有什么问题。

1 - 在此，您应该将string与文字进行比较。因此，您需要通过在引号中写下 Art 是文本：'Art'。

if (x == Art) {

2 - 您不应该将文本返回到按钮事件。话虽如此，string您尝试从此function返回时存在一些问题。这是你得到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>标记中。最好是在其相应的结束标签之前。

我已经纠正了这些问题，并对其进行了一些更改。您可以点击运行代码段按钮在下面查看。

＆＃13;

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';
    }
  }
}

＆＃13;

<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="" />

＆＃13;

使用JavaScript if / else函数返回图像

4 个答案: