Javascript 单击图像并更改文本_Javascript_Html

Javascript 单击图像并更改文本

javascript html

Javascript 单击图像并更改文本,javascript,html,Javascript,Html,一个页面上有2个图像和一个文本框（php）当你点击图像时，我想改变文本我是初学者，请发送一个不难理解的代码 <body> <img src="bier1.jpg" alt="u mad" onclick= ""> <img src="bier2.jpg" alt="u mad" onclick= ""><br> <form> <input type="text" name="Example"/

一个页面上有2个图像和一个文本框（php）

当你点击图像时，我想改变文本

我是初学者，请发送一个不难理解的代码

<body>
    <img src="bier1.jpg" alt="u mad" onclick= "">
    <img src="bier2.jpg" alt="u mad" onclick= ""><br>

    <form>
    <input type="text" name="Example"/>
    </form>
</body>

我猜他们的意思是该页面被用作php页面。我完全可以用javascript来实现这一点。在伪代码中，我将执行以下操作

在javascript中创建函数

函数使用名称查找输入

函数将输入的文本设置为您喜欢的任何内容（这可能基于单击的图像）

最后，我建议你看看w3schools网站，它会给你很多简单的例子，让你开始学习

同时启动basic并逐步升级，如果您无法一次完成所有操作，请一点一点地完成，当您单击onclick时让它发出警报，然后在知道onclick是否正常工作后尝试设置文本。

您需要先将

id

添加到文本字段：

<input type="text" name="Example" id="myTextBox" />

然后你可以做这样的事情：

<img src="bier1.jpg" alt="u mad" onclick="document.getElementById('myTextBox').value = this.alt;" />
<img src="bier2.jpg" alt="u mad" onclick="document.getElementById('myTextBox').value = this.alt;" />

但这并不十分优雅，您可以将其应用于所有图像，而无需更改标记，并使用以下JavaScript：

window.onload = function() {
    var oTextbox = document.getElementById('myTextBox');
    for (var i = 0; i < document.images.length; i++) {
        document.images[i].onclick = function() {
            oTextbox.value = this.alt;
        };
    }
};

window.onload=function（）{
var oTextbox=document.getElementById（'myTextBox'）；
对于（var i=0；i



您还可以通过将类应用于希望“可单击”的图像，使上述代码仅适用于某些图像，例如：
<img src="bier1.jpg" alt="u mad" />
<img class="clickable" src="bier2.jpg" alt="u mad 2" />



要使文本框仅发生第二次更改，请使用以下代码：
window.onload = function() {
    var oTextbox = document.getElementById('myTextBox');
    for (var i = 0; i < document.images.length; i++) {
        var image = document.images[i];
        if (image.className === "clickable" || image.className.indexOf("clickable ") >= 0 || image.className.indexOf(" clickable") >= 0) {
            image.onclick = function() {
                oTextbox.value = this.alt;
            };
        }
    }
};

window.onload=function（）{
var oTextbox=document.getElementById（'myTextBox'）；
对于（var i=0；i=0 | | image.className.indexOf（“clickable”）>=0）{
image.onclick=function（）{
oTextbox.value=this.alt；
};
}
}
};

.
您想更改文本框的文本，我是对的吗？如果是，则代码如下：
    <body>
        <img src="bier1.jpg" alt="u mad" onclick= "document.forms[0].elements['Example'].value = 'Image 1'">
        <img src="bier2.jpg" alt="u mad" onclick= "document.forms[0].elements['Example'].value = 'Image 2'"><br>

        <form>
        <input type="text" name="Example"/>
        </form>
    </body>




您需要使用Javascript，我更喜欢使用Javascript代码，所以请在上进行快速谷歌搜索

$（函数（）{
//您需要将单击事件绑定到图像，并且可能
$（“img.has message”）。单击（函数（）{
var msg=$（this.attr（“数据消息”）；
//从特定的图像中获取信息
$（“#文本框_id”）.attr（“值”，msg）；
//更改文本框的值以显示消息
返回false；
});
});

因此，您将此代码放在页面的
标记中
假设您可以将HTML更改为如下所示，则此代码将非常有效：
<body>
    <img src="bier1.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked">
    <img src="bier2.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked"><br>
    <form>
        <input type="text" id="text_box_id" name="Example"/>
    </form>
</body>





请记住，jQuery需要包含在您的页面中才能运行上述功能。
您想只使用PHP吗？无需向字段添加id，只需一个名称即可轻松完成此操作，javascript将返回一个具有该名称的元素数组，但是如果它是页面上唯一的一个元素，则可以轻松地将其选择为0索引数组的x。@Jon如果文本框是独立的，即不是表单的一部分，并且看起来就是这样，则不会。添加id
没有任何错误。使用id没有任何错误，但它不是必需的。为什么它必须是表单的一部分才能按名称搜索？为什么不能使用document.getElementsByName（“示例”）；这将返回dom中具有名称示例的元素数组。从他的代码中只有一个这样的情况，因此获取数组的第一个元素将返回输入元素。@ManoHaran当然，在第oTextbox.value=This.alt；
行后添加另一行，将所需值设置为所需的第二个textbox.@Mano如果在onclick中有逗号，它不应该在那里。只有命令之间的“；”。
<body>
    <img src="bier1.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked">
    <img src="bier2.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked"><br>
    <form>
        <input type="text" id="text_box_id" name="Example"/>
    </form>
</body>