使用html按钮调用加载特定图像的Javascript函数

Question

<html>
<body>
  <br/>
   <script>
        var i = 1;
        var pag="p"+String(i)+".svg";

        function pageno(param)
        {             
            i=param;
            pag="p"+param+".svg";
            document.getElementById('slide').src=pag;
        }

        </script>

<div>
    <iframe src="p1.svg" id="slide" height=900 width=1105 allowTransparency="true" scrolling="no" frameborder="0" >
    </iframe>
      <form >
        Page:
        <input type="text" name="pg">
        <input id="submit" type="button" value="submit" onclick="pageno('pg')" >

    </form>
</div>
</body>
</html>

This script was for loading a specific image file with extension .svg using a textbox to take input of the page number and load the image file with name: 此脚本用于使用文本框加载扩展名为.svg的特定图像文件，以输入页码并以名称加载图像文件：

"p"+pgno+".svg"

But the call to the function pageno with parameter as pg isn't working.I tried looking at similar problems but the solutions didn't work for me. 但是调用参数为pg pageno函数无法正常工作，我尝试查看类似的问题，但是解决方案对我来说不起作用。

Is there a better way to do this? 有一个更好的方法吗？

The html file is in the same location as of the images(.svg) html文件位于与images（.svg）相同的位置

So can anyone help me on why the images aren't loading ? 那么，有人可以帮助我为什么不加载图像吗？

Answer 1

Submit button is working fine. Submit按钮工作正常。 Please check for other errors 请检查其他错误

 function pageno(pg) { alert(pg) }

 <form > Page: <input type="text" name="pg"> <input id="submit" type="button" value="submit" onclick="pageno('pg')" > </form>

Answer 2

Hope this help you, I'm answering you question in jquery because you have the question tagged as Jquery. 希望对您有帮助，我在jquery中回答您的问题，因为您将问题标记为Jquery。

In my answer I've some code lines commented un-comment them and remove the line below those commented lines. 在我的答案中，我有一些代码行注释掉了它们的注释，并删除了那些注释行下面的行。

Also like to mention that to remove the default action from a button just change the type as follows. 也要提到要从按钮中删除默认操作，只需按如下所示更改类型。

<input type="button" >

this makes the button to be just a button 这使得按钮只是一个按钮

 $(document).ready(function() { $(document).on('click', '#submit', function() { var i = 1, pageNo = $('#pg').val(), //img = "p" + i + ".svg"; img = "https://static.pexels.com/photos/55787/pexels-photo-55787.jpeg";//Remove this line and uncomment the line above this if (pageNo !== "") { //img = "p" + pageNo + ".svg"; img = pageNo; //remove this when you're using this code coppy pate a URL to the text area to see it getting loaded to the iframe. $('#slide').prop('src', img); }else{ $('#slide').prop('src', img); } }) })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> Page: <input type="text" id="pg"> <input type="button" id="submit" value="submit"> <iframe src="https://static.pexels.com/photos/17679/pexels-photo.jpg" id="slide" height=900 width=1105 allowTransparency="true" scrolling="no" frameborder="0"> </iframe> </form>

Also you here is a corking jsFiddle . 另外，您这里还有一个塞子jsFiddle 。 Please test this and let me know if it works or not. 请对此进行测试，并让我知道它是否有效。

使用html按钮调用加载特定图像的Javascript函数

问题描述

2 个解决方案

解决方案1
0 2017-09-18 05:22:35

解决方案2
0 2017-09-18 06:09:09

使用html按钮调用加载特定图像的Javascript函数

问题描述

2 个解决方案

解决方案1 0 2017-09-18 05:22:35

解决方案2 0 2017-09-18 06:09:09

解决方案1
0 2017-09-18 05:22:35

解决方案2
0 2017-09-18 06:09:09