Skip to content

Instantly share code, notes, and snippets.

@jpetto

jpetto/dom_demo_2.html

Created August 25, 2012 23:13
Show Gist options
  • Save jpetto/3472060 to your computer and use it in GitHub Desktop.
Save jpetto/3472060 to your computer and use it in GitHub Desktop.
Download ZIP
DOM Demo #2
Raw
dom_demo_2.html
<!DOCTYPE html>
<html>
<head>
<title>DOM Demo - Attributes</title>
<style type="text/css">
#form1.embiggen #user_name {
font-size: 300%;
}
</style>
</head>
<body>
<form id="form1">
<input type="text" id="user_name" value="Maria Villalobos" />
<button type="button" id="getid">&lt;- What type of field is this?</button>
<br />
<button type="button" id="lock">Lock</button>
<button type="button" id="unlock">Unlock</button>
<button type="button" id="embiggen">Embiggen</button>
<button type="button" id="debigulate">Debigulate</button>
</form>
<script>
var form = document.querySelector("#form1");
var user_name = document.querySelector("#user_name");
var getid = document.querySelector("#getid");
var lock = document.querySelector("#lock");
var unlock = document.querySelector("#unlock");
var embiggen = document.querySelector("#embiggen");
var debigulate = document.querySelector("#debigulate");
getid.onclick = function(event) {
var type = user_name.getAttribute("type");
if (type === 'text') {
alert("Current type is " + type + ". Switching to search...");
user_name.setAttribute("type", "search");
} else {
alert("Current type is " + type + ". Switching to text...");
user_name.setAttribute("type", "text");
}
}
lock.onclick = function(event) {
user_name.setAttribute("readonly", "readonly");
}
unlock.onclick = function(event) {
user_name.removeAttribute("readonly");
}
embiggen.onclick = function(event) {
form1.setAttribute("class", "embiggen");
}
debigulate.onclick = function(event) {
form1.removeAttribute("class");
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment