मान लें कि निम्नलिखित हमारा बटन है -
<button id="buttonDemo" style="background:skyblue;margin-left:10px;">Press Me</button>
नीचे दिए गए इनपुट फ़ील्ड को भरने पर, उपरोक्त बटन का रंग बदलना चाहिए -
<input type="text" id="changeColorDemo" style="margin-left:10px;margin-top:10px" onkeyup="changeTheColorOfButtonDemo()">
उदाहरण
निम्नलिखित कोड है -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
<label>
UserName:
</label>
<input type="text" id="changeColorDemo" style="margin-left:10px;margin-top:10px"
onkeyup="changeTheColorOfButtonDemo()">
<br><br>
<button id="buttonDemo" style="background:skyblue;margin-left:10px;">Press Me</button>
</body>
<script>
function changeTheColorOfButtonDemo() {
if (document.getElementById("changeColorDemo").value !== "") {
document.getElementById("buttonDemo").style.background = "green";
} else {
document.getElementById("buttonDemo").style.background = "skyblue";
}
}
</script>
</html> उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल नाम "anyName.html(index.html)" को सेव करें। फ़ाइल पर राइट क्लिक करें और विजुअल स्टूडियो कोड एडिटर में "ओपन विद लाइव सर्वर" विकल्प चुनें।
आउटपुट
यह कंसोल पर निम्न आउटपुट उत्पन्न करेगा -
जब आप टेक्स्ट बॉक्स में कुछ लिखते हैं, तो बटन का रंग आसमानी नीले से हरे रंग में बदल जाएगा जैसा कि नीचे दिखाया गया है -
