Question

只是想让大家提前知道我是html / javascript编码的新手，所以如果这个问题看起来太简单，我道歉。我试图研究答案，似乎无法找到我想做的确切想法。

我想要做的是有一个非常简单的表单，它将根据表单中输入的内容弹出图像。即。如果你输入一个“a”，它会弹出一个苹果的图片，但如果你输入一个“b”，它会弹出一张鸟的图片。

我找到了2段代码，一个用于简单表单，另一个用于弹出窗口（但弹出窗口是基于单击链接而不是表单条目）

我无法弄清楚如何将两者结合起来。这就是我的......

http://sparkycat4e.com/htmlformtest3.html

抱歉，我必须发布一个链接，当我复制我的代码时，它试图运行它。

非常感谢任何帮助。

Answer 1

我检查了你的源代码，如果没有一些流浪的括号和拼写错误，你几乎得到它。我在这里清理了一下（只需将所有js代码放在一个<script>标签中）并做了一些小改进（使用switch，并使用camelCase作为名称）：

<script type='text/javascript'>
var newWindow = '';

function popItUp(url) {
  if (newWindow.location && !newWindow.closed) {
    newWindow.location.href = url;
    newWindow.focus();
  } else {
    newWindow = window.open(url, 'htmlname', 'width=404,height=316,resizable=1');
  }
}

function allLetter(text) {
  switch (text) {
    case "a":
      popItUp("https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201709101434");
      break;
    case "b":
      popItUp("https://i.pinimg.com/736x/03/59/20/035920dbccef6d85fee537765a5c3f08--celebrity-videos-celebrity-baby-names.jpg");
      break;
    default:
      alert('Please input alphabet characters only');
  }
}
</script>

您的表单现在直接在提交时传递值：

<form name="form1" action="#">
  <ul>
    <li>Code:</li>
    <li><input type='text' name='text1' /></li>
    <li class="rq">*Enter alphabets only.</li>
    <li>&nbsp;</li>
    <li><input type="submit" name="submit" value="Submit" onclick="allLetter(document.form1.text1.value)" /></li>
    <li>&nbsp;</li>
  </ul>
</form>

图像弹出窗口基于表单中的文本

1 个答案: