Question

我无法将此文本输入正确激活随机shuffle图像数组。它将激活它，但在初始点击时。我希望它要求用户输入验证然后提交文本。

<style>iframe {display:none !important;}
    <!--
p {color:#000000; font-size:14px; font-family: verdana,  serif}
.title {color:#000000; font-size:14px; font-family: verdana,  serif}
-->
iframe:first-child { display: none !important; } {

top: 0% !important;

right:0% !important; 

display:none !important;

}

</style>
<script language="javascript">



var imagesArray = [
'https://assets.entrepreneur.com/content/3x2/1300/20150827173347-test-google-adwords-campaign-search-engine-internet.jpeg',
'https://yt3.ggpht.com/-DvvzUuiYGos/AAAAAAAAAAI/AAAAAAAAAAA/YoUb-VzIovA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg',
'https://www.google.com/logos/doodles/2015/tu-bav-2015-5651988540817408-hp2x.jpg',
'https://www.google.com/doodle4google/images/splashes/featured.png',
'http://www.onetechstop.net/wp-content/uploads/2016/01/google-logo.jpg',
];

var usedImages = {};
var usedImagesCount = 0;

function displayImage(){

    var num = Math.floor(Math.random() * (imagesArray.length));
    if ($('#textbox').val() === '') {
    e.preventDefault();
}
    if (!usedImages[num]){
        document.canvas.src = imagesArray[num];
        usedImages[num] = true;
        usedImagesCount++;
        if (usedImagesCount === imagesArray.length){
            usedImagesCount = 0;
            usedImages = {};
        }
    } else {
        displayImage();
    }
}




</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".btn1").click(function(){
        $("p").fadeOut()
    });
});

    

</script>

<html>
<head>
<body>
<center>
<form name="imageForm">

   <tr align="center">
   <td><br><br><br><br><br><br><br><br><br><br>
      <img src="http://i.imgur.com/8bp6n2l.jpg" name="canvas" /><br><br>
    </td>
  </tr>
  <tr>
    <td>
<center>
        <input  type="text"  class="btn1" id = "textbox"  size="60" ><br><br>
      <input onclick="displayImage();" type="reset"  value="Submit" class="btn1" /><br/>

    </td>
  </tr>
  
  </table>
</form>
<p><b>Progress</b> or <b>React?</b></p>

</head>
</body>
</html>

<html>
<head>
<body>
<center>
<form name="imageForm">

   <tr align="center">
   <td><br><br><br><br><br><br><br><br><br><br>
      <img src="http://i.imgur.com/8bp6n2l.jpg" name="canvas" /><br><br>
    </td>
  </tr>
  <tr>
    <td>
<center>
        <input  onclick="displayImage();" type="text"  class="btn1" id = "textbox"  size="60" ><br><br>
      <br/>

    </td>
  </tr>

  </table>
</form>

</head>
</body>
</html>

Answer 1

如果您希望图像在输入时更改，只需添加一个oninput事件侦听器。但是，我建议你不要在这种情况下使用内联事件监听器，因为你想要监听多个事件。

使用displayImage()代码添加事件监听器可能会更好。

...
<center>
        <input  onclick="displayImage()" oninput="displayImage()" type="text"  class="btn1" id = "textbox"  size="60" ><br><br>
      <br/>

    </td>
  </tr>

  </table>
</form>

</head>
</body>
</html>

Answer 2

在您提供的代码段中有很多未关闭的标签。但是如果没有输入，在if语句中添加return可以防止图像发生变化。

jsfiddle：https://jsfiddle.net/tv6rL23x/3/

if ($('#textbox').val() === '') 
{
    return
}

将输入文本提交到随机图像数组

2 个答案: