gpt4 book ai didi

javascript - 如何通过 Javascript 动态放置图像元素

转载 作者:行者123 更新时间:2023-11-30 16:38:14 25 4
gpt4 key购买 nike

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Form_Valid_JS</title>
</head>

<body>
<form name="form" id="form">
<label style="font-size:18px"><strong> Name</strong> </label><br><br><div id="error"> </div>
<input type="text" id="fname" name="fname" placeholder="First Name" pattern="[a-zA-Z\s]{0,10}" onBlur="fvalidity()" onFocus="Focus()">;
<input type="text" id="lname" name="lname" placeholder="Last Name" pattern="[a-zA-Z\s]{0,10}" onBlur="lvalidity()">
<input type="submit">
</form>


</body>
</html>
<script>
function fvalidity()
{
var txt="";
if( document.getElementById("fname").validity.patternMismatch)
{
txt="*Only Alphabet max 10 Characters.";
}
if(document.getElementById("fname").value=="")
{
txt="Field is Empty!!";
}
if(txt!="")
{
img();
var s=document.getElementById("error");
s.innerHTML=txt;
s.style.visibility="visible";
}
}
function img()
{
var sample=document.createElement("img");
var t= document.createAttribute("src");
t.value="../cross_script.png";
sample.setAttributeNode(t);
var id=document.createAttribute("id");
id.value="img";
sample.setAttributeNode(id);
document.getElementById("form").appendChild(sample);

}
</script>

我想在每个输入字段后动态放置一个图像以显示勾号或叉号。但是当我这样做时,它将图像放在提交按钮之后的最后一个位置,在每个输入字段之后动态放置图像的正确程序是什么。我的意思是我创建了一个函数,然后在进行验证时调用它。不是。我动态地制作元素和标签并在其上应用 Cs 并在每个输入字段后显示在页面上。

最佳答案

在这种情况下,您需要将引用传递给输入字段,之后要插入图像

function img(target) {
var sample = document.createElement("img");
sample.src = "../cross_script.png";
document.getElementById("form").appendChild(sample);
if (target.nextSibling) {
target.parentNode.insertBefore(sample, target.nextSibling)
} else {
target.parentNode.appendChild(sample)
}
}

然后

img(document.getElementById("fname"));

关于javascript - 如何通过 Javascript 动态放置图像元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32391703/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com