网页按钮单击图像更新

Question

我想知道是否可以使用带有文本字段和按钮的HTML表单，在其中输入字符串（例如5），并在按下按钮时，将存储在服务器上的图像“ image5.jpg”渲染到该网页。

我认为可以归结为编码按钮“ on-click method”：

1. 读取文本字段并为图像形成文件名字符串

2. 最好更新图像（或者将用户重定向到“ http：//.../image5.jpg ”也可以）

除了基本的HTML之外，我还不非常熟悉，但是如果我知道可以完成这项工作的话，我可以将它们一起破解。 谢谢。

Answer 1

// DOM ready handler
$(function(){

  // Click on change image button handler
  $('#select').click(function(){

    // Get the value entered in the number input
    var image = $('#number').val();

    // Change the source of the image
    $('#image').attr('src', "http://somewebsite.com/image" + image +".jpg");
  });
});

JSFiddle： https ://jsfiddle.net/0rn00L4a/

没有可显示的真实图像，但是如果您检查DOM，就会看到它将图像更改为类似

<img id="image" src="http://somewebsite.com/image2.jpg"> 

因此，如果您输入了正确的图像路径，则只需按一下按钮即可立即显示它们。

您可以只在输入的change事件上执行此操作，但这有点麻烦。