can anyone help me to add this icon <i class="fas fa-check-circle"></i>
if the background color changes to green using the following code:
document.querySelectorAll('input').forEach((inp) => {
inp.addEventListener('focusout', () => {
let value = inp.value.split(' ').join('')
if (value == '') {
inp.style.backgroundColor = "red";
} else {
inp.style.backgroundColor = "green";
let icon = document.createElement('i')
icon.classList.add('fas', 'fa-check-circle')
inp.appendChild(icon)
}
})
})
HTML Code
<section class="control-group">
<label class="control-label" for="company">Company</label>
<div class="controls">
<input
autofocus=""
class="input-xlarge"
id="company"
name="company"
placeholder="Company name"
type="text"
value=""
/>
</div>
</section>
<section class="control-group">
<label class="control-label" for="fname">Name</label>
<div class="controls two-col">
<input
class="input-medium"
id="fname"
name="fname"
placeholder="First name"
type="text"
value=""
/>
</div>
the excepted result is that the icon should be nest to every text field that has been filled.
You are trying tp append a child to an input. An input does not have children. You need to add it after the input. Also with your code, it would add a bunch of elements every time it loses focus.
document.querySelectorAll('input').forEach((inp) => { let icon = document.createElement('i') icon.classList.add('fas', 'fa-check-circle', 'hidden') inp.after(icon); inp.addEventListener('focusout', () => { let value = inp.value.split(' ').join('') if (value == '') { inp.style.backgroundColor = "red"; icon.classList.add('hidden'); } else { icon.style.display = 'inilne-block'; inp.style.backgroundColor = "green"; icon.classList.remove('hidden'); } }) })
input { padding-right: 20px; } input + i { position: absolute; margin-left: -20px; } i.hidden { display: none; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <input type="text"><input type="text"><input type="text">
You cannot add children to an input element. However, you can add the icon next to the input by means of insertAdjacentHTML()
.
document.querySelectorAll('input').forEach((inp) => { inp.addEventListener('focusout', () => { let value = inp.value.split(' ').join('') if (value == '') { inp.style.backgroundColor = "red"; } else { inp.style.backgroundColor = "green"; inp.insertAdjacentHTML('afterend', '<i class="fas fa-check-circle">Your icon here</i>'); } }) })
<input type="text">
If you want the icon "inside" the input, then you need to use CSS to set it as a background image, which is not related to "adding a HTML element using JavaScript".
I would suggest that rather than adding new elements in response to user input, you build all the elements into your html, and then hide/show/style them appropriately with a css class or two:
document.querySelectorAll('input').forEach((inp) => { inp.addEventListener('focusout', () => { const parent = inp.parentNode; let value = inp.value.split(' ').join(''); if (value == '') { parent.classList.remove("valid"); parent.classList.add("invalid"); } else { parent.classList.remove("invalid"); parent.classList.add("valid"); } }); });
.controls i { display: none; } .controls.valid input { background-color: green; } .controls.valid i { display: inline; } .controls.invalid input { background-color: red; }
<section class="control-group"> <label class="control-label" for="company">Company</label> <div class="controls"> <input autofocus="" class="input-xlarge" id="company" name="company" placeholder="Company name" type="text" value="" /> <i class="fas fa-check-circle">test</i> </div> </section> <section class="control-group"> <label class="control-label" for="fname">Name</label> <div class="controls two-col"> <input class="input-medium" id="fname" name="fname" placeholder="First name" type="text" value="" /> <i class="fas fa-check-circle">test</i> </div> </section>
elem = document.createElement("<div id='myID'> my Text </div>");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.