网页按钮点击图片更新
问题描述:
我想知道是否有可能有一个带有文本字段和按钮的HTML表单,其中您输入一个字符串(如5)并按下按钮,图像“image5.jpg “,存储在服务器上,呈现在网页上。网页按钮点击图片更新
相信它归结为“上点击方法”编码的按钮:
读文本字段和形成用于图像
文件名的字符串更新图像,优选(或者重定向用户到“http://.../image5.jpg”也同样可以)
我并不十分熟悉的莫过于基本HTML多得多,但我可以一起本事我f我知道什么可以完成工作。 谢谢。
答
// 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
事件上做到这一点,但这有点不和谐。
+0
最后一件事:HTML和Javascript如何结合在一起?把JS中的
+1
是的。由于代码位于DOM就绪处理程序中,并且在加载页面之前不会运行,因此该脚本可以转到页面中的任何位置。头部,身体末端等 –
你是对的! (1)'textField.value'和(2)'img.src = value'。 – JCOC611