జావాస్క్రిప్ట్‌లో డైనమిక్‌గా టెక్స్ట్ బాక్స్‌ను ఎలా సృష్టించాలి

కొందరు దీనిని మేజిక్ అని పిలుస్తారు - వస్తువులను అకస్మాత్తుగా ఎక్కడా కనిపించకుండా చేసే సామర్థ్యం. మీరు జావాస్క్రిప్ట్ యొక్క కొన్ని పంక్తులను ఉపయోగించి మీ వెబ్‌సైట్‌లో ఈ రకమైన మ్యాజిక్‌ను సృష్టించవచ్చు. టెక్స్ట్ బాక్స్‌లు, ఉదాహరణకు, వస్తువులు డైనమిక్‌గా కనిపించేలా నేర్చుకునేటప్పుడు ఉపయోగించాల్సిన మంచి HTML అంశాలు. మీరు మీ వెబ్ పేజీని రూపకల్పన చేసేటప్పుడు వాటిని మీ కోడ్‌లోకి రూపొందించడానికి బదులుగా, అవసరమైన విధంగా టెక్స్ట్ బాక్స్‌లను జోడించి, అదే సమయంలో సైట్ సందర్శకులను ఆకట్టుకోండి.

టెక్స్ట్ బాక్స్ సృష్టి

టెక్స్ట్ బాక్స్ కార్యరూపం దాల్చే ముందు, టెక్స్ట్ బాక్స్ అంటే ఏమిటో మీరు అర్థం చేసుకోవాలి. కింది ఉదాహరణలో చూపిన విధంగా HTML దీన్ని ఇన్‌పుట్ ట్యాగ్‌గా తెలుసు:

ఈ ఇన్పుట్ ట్యాగ్ రెండు ముఖ్యమైన లక్షణాలను కలిగి ఉన్న టెక్స్ట్ బాక్స్ ను సృష్టిస్తుంది; id మరియు రకం. టైప్ గుణం, దీని విలువ "టెక్స్ట్", బటన్ వంటి మరొక రకమైన నియంత్రణకు బదులుగా టెక్స్ట్ బాక్స్‌ను సృష్టించమని బ్రౌజర్‌లకు చెబుతుంది. ఐడి గుణం, ఐచ్ఛికం, మీరు తరువాత టెక్స్ట్ బాక్స్‌ను మార్చవలసి వస్తే ఉపయోగపడుతుంది. విలువ ఎంపిక, ఐచ్ఛికం కూడా, వెబ్ పేజీ తెరిచినప్పుడు మీరు టెక్స్ట్ బాక్స్‌లో చూడాలనుకుంటున్న విలువను కలిగి ఉంటుంది.

డైనమిక్ టెక్స్ట్ బాక్స్‌లు

మూలకం యొక్క లక్షణాలను మీరు ఎక్కడో విలువలు ఇచ్చినంతవరకు మీరు నిర్వచించినప్పుడు HTML పట్టించుకోదు. టెక్స్ట్ బాక్స్ మూలకాన్ని డైనమిక్‌గా సృష్టించగల సామర్థ్యం మీకు ఉందని మరియు మీకు నచ్చిన ఎప్పుడైనా దాని లక్షణాలను సెట్ చేయగలదని దీని అర్థం. Document.createElement ఫంక్షన్ క్రింద చూపిన విధంగా ఇది సాధ్యపడుతుంది:

var box = document.createElement ("ఇన్పుట్");

ఒక HTML ఇన్పుట్ మూలకాన్ని సృష్టించడానికి మరియు "బాక్స్" అనే వేరియబుల్కు కేటాయించడానికి అంతే పడుతుంది. ఈ ఉదాహరణలో చూపిన విధంగా మీరు దాని రకం లక్షణాన్ని "టెక్స్ట్" విలువను ఇచ్చేవరకు బాక్స్ ఆబ్జెక్ట్ టెక్స్ట్ బాక్స్‌గా మారదు:

box.type = "టెక్స్ట్";

వెబ్ పేజీ ఇంటిగ్రేషన్

దిగువ ఉన్న ఈ కోడ్ టెక్స్ట్ బాక్స్‌ను HTML డాక్యుమెంట్‌కు జోడిస్తుంది. ఉపయోగకరమైన appendChild ఫంక్షన్‌ను ఉపయోగిస్తుంది:

document.body.appendChild (బాక్స్);

మీరు ఒక నిర్దిష్ట నియంత్రణ తర్వాత టెక్స్ట్ బాక్స్‌ను జోడించాలనుకుంటే, బదులుగా ఈ క్రింది స్టేట్‌మెంట్‌ను ఉపయోగించండి:

document.getElementById ("some_Element_ID"). appendChild (box);

"Some_Element_ID" ను మూలకం పేరుతో భర్తీ చేయండి, ఆ తర్వాత మీరు టెక్స్ట్ బాక్స్‌ను జోడించాలనుకుంటున్నారు. ఉదాహరణకు, ఆ మూలకం ఐడి "బటన్ 1" అయిన బటన్ అయితే, అపెండ్‌చైల్డ్ స్టేట్మెంట్ ఈ క్రింది విధంగా కనిపిస్తుంది:

document.getElementById ("button1"). appendChild (బాక్స్);

ఐచ్ఛిక లక్షణాలు

మీ క్రొత్త టెక్స్ట్ బాక్స్ ఈ కోడ్‌ను ఉపయోగించి ఖచ్చితంగా పని చేస్తుంది. స్టేట్‌మెంట్‌ను కలిగి ఉన్న జావాస్క్రిప్ట్ ఫంక్షన్‌ను సృష్టించండి మరియు మీకు టెక్స్ట్ బాక్స్ అవసరమైనప్పుడు కాల్ చేయండి. అయితే, మీరు టెక్స్ట్ బాక్స్ విలువ మరియు ID లక్షణాలను కూడా ఈ క్రింది విధంగా సెట్ చేయవచ్చు:

box.value = boxValue; box.id = boxID;

బాక్స్‌వాల్యూ మరియు బాక్స్‌ఐడి విలువలను ఫంక్షన్‌కు పాస్ చేయండి మరియు ఇది ఆ లక్షణాలను టెక్స్ట్ బాక్స్‌కు వర్తిస్తుంది. మీరు ID విలువను కేటాయించినట్లయితే, దిగువ ఉదాహరణలో చూపిన విధంగా టెక్స్ట్ బాక్స్ యొక్క లక్షణాలను నవీకరించడానికి మీరు తరువాత ఉపయోగించవచ్చు:

var boxObject = document.getElementById (boxID); boxObject.style.backgroundColor = "ఎరుపు";

మొదటి స్టేట్మెంట్ టెక్స్ట్ బాక్స్కు సూచనను పొందుతుంది మరియు చివరి స్టేట్మెంట్ టెక్స్ట్ బాక్స్ యొక్క నేపథ్య రంగును ఎరుపుకు మారుస్తుంది.