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

时间:2017-09-18 05:01:31

标签: javascript jquery html svg

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

此脚本用于使用扩展名.svg加载特定图像文件  文本框以输入页码并加载名称为

的图像文件
"p"+pgno+".svg"

但是使用参数为pageno的函数pg的调用不起作用。我尝试查看类似的问题,但解决方案对我不起作用。

有更好的方法吗?

html文件与图片位于同一位置(.svg)

那么有人可以帮我解决图片无法加载的原因吗?

2 个答案:

答案 0 :(得分:0)

Submit按钮工作正常。请检查其他错误

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

</form>

答案 1 :(得分:0)

希望这有助于你,我在jquery中回答你的问题,因为你有一个标记为Jquery的问题。

在我的回答中,我评论了一些代码行取消注释,并删除了这些注释行下方的行。

另外要提一下,要从按钮中删除默认操作,只需按以下方式更改类型。

<input type="button" >

这使按钮只是一个按钮

&#13;
&#13;
$(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);
    }
  })
})
&#13;
<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>
&#13;
&#13;
&#13;

你这里也是一个塞住jsFiddle。请测试一下,让我知道它是否有效。