2022-11-12
<!DOCTYPE html>
<html>
<head>
<title>Stroop</title>
</head>
<body>
<div id="green" style="color: red; font-size: 32in; position:
absolute; top: 1in" onClick="move();"><p>Green</p></div>
<script>
function animate() {
element = document.getElementById("green");
element.style.top = "0.25in";
element.style.color = "green";
setTimeout(() => {
element.style.color = "red";
element.style.top = "1in";
}, 5000);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Stroop</title>
</head>
<body>
<div id="green" style="color: red; font-size: 32in; position:
absolute; top: 1in" onClick="move();"><p>Green</p></div>
<script>
function animate() {
element = document.getElementById("green");
element.style.top = "0.25in";
element.style.color = "green";
setTimeout(() => {
element.style.color = "red";
element.style.top = "1in";
}, 5000);
}
</script>
</body>
</html>
Stroop
#test {
color: red;
top: 0.75in;
position: absolute;
font-size: 32pt;
}
const handleAnimation = () => {
let styling = document.getElementById("test").style;
styling.color = "green";
styling.top = "0in";
setTimeout(() => {
styling.top = "0.75in";
styling.color = "red";
}, 5000);
};
Green!
<nowiki>
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Stroop</title>
<meta charset="utf-8" />
<style>
#test {
color: red;
top: 0.75in;
position: absolute;
font-size: 32pt;
}
</style>
<script>
const handleAnimation = () => {
let styling = document.getElementById("test").style;
styling.color = "green";
styling.top = "0in";
setTimeout(() => {
styling.top = "0.75in";
styling.color = "red";
}, 5000);
};
</script>
</head>
<body>
<div id="test" onclick="handleAnimation()">Green!</div>
</body>
</html>
</nowiki>
2022-11-13
<!DOCTYPE html>
<html>
<head>
<title>Stroop</title>
<meta charset = "utf-8">
</head>
<body>
<div id="green" style="color: red; font-size: 32in; position:
absolute; top: 1in" onClick="change();"><p>Green</p></div>
<script>
function change() {
elem = document.getElementById("green");
elem.style.top = "0.25in";
elem.style.color = "green";
setTimeout(() => {
element.style.top = "1in";
element.style.color = "red";
}, 5000);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Stroop</title>
<meta charset = "utf-8">
</head>
<body>
<div id="green" style="color: red; font-size: 32in; position:
absolute; top: 1in" onClick="change();"><p>Green</p></div>
<script>
function change() {
elem = document.getElementById("green");
elem.style.top = "0.25in";
elem.style.color = "green";
setTimeout(() => {
element.style.top = "1in";
element.style.color = "red";
}, 5000);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stroop</title>
</head>
<body>
<div id="text" onclick="doTheThing()" style="font-size:32pt;color:red;position:absolute;top:1in;">Green!</div>
</body>
<script type="text/javascript">
function doTheThing() {
text = document.getElementById('text')
text.style.color = 'green'
text.style.top = '.25in'
console.log(text.style.top)
setTimeout(() => {
text.style.color = "red"
text.style.top = "1in"
}, 5000)
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stroop</title>
</head>
<body>
<div id="text" onclick="doTheThing()" style="font-size:32pt;color:red;position:absolute;top:1in;">Green!</div>
</body>
<script type="text/javascript">
function doTheThing() {
text = document.getElementById('text')
text.style.color = 'green'
text.style.top = '.25in'
console.log(text.style.top)
setTimeout(() => {
text.style.color = "red"
text.style.top = "1in"
}, 5000)
}
</script>
</html>
Stroop!
function change(){
green = document.getElementById("green")
green.style.top = "0in"
green.style.color = "green"
setTimeout(() => {
green.style.top = "0.75in"
green.style.color = "red"
}, 5000)
}
Green!
<nowiki><!doctype html>
<html>
<head>
<title>Stroop!</title>
</head>
<body>
<script>
function change(){
green = document.getElementById("green")
green.style.top = "0in"
green.style.color = "green"
setTimeout(() => {
green.style.top = "0.75in"
green.style.color = "red"
}, 5000)
}
</script>
<div id="green" style="color: red; font-size: 32pt;
top: 0.75in; position: absolute" onclick="change()">
<p>Green!</p>
</div>
</body>
</html></nowiki>
<!Doctype html>
<head>
<title>Stroop</title>
</head>
<body>
<div id="green" style="font-size: 32pt; color: red; position: absolute; top:1in;" onclick="change()">
Green!
</div>
<script>
function change(){
element = document.getElementById("green")
element.style.top="0.25in"
element.style.color="green"
setTimeout(() => {
element.style.color = "red"
element.style.top = "1in"
}, 5000)
}
</script>
</body>
<html>
<!Doctype html>
<head>
<title>Stroop</title>
</head>
<body>
<div id="green" style="font-size: 32pt; color: red; position: absolute; top:1in;" onclick="change()">
Green!
</div>
<script>
function change(){
element = document.getElementById("green")
element.style.top="0.25in"
element.style.color="green"
setTimeout(() => {
element.style.color = "red"
element.style.top = "1in"
}, 5000)
}
</script>
</body>
<html>
Stroop
(Edited: 2022-11-14)
Green
const changeGreen = () => {
const green_div = document.getElementById("green-tag");
green_div.style.color = "green";
const top_amt = green_div.style.top;
green_div.style.top = `${(top_amt.match(/\d+/) - .75)}in`;
setTimeout(() => {
green_div.style.color = "red";
green_div.style.top = top_amt;
}, 5000);
}
<nowiki><!DOCTYPE html>
<html>
<head>
<title>Stroop</title>
</head>
<body>
<div
id="green-tag"
style="font-size: 32pt; color: red; position: relative; top: 1in; left: 1in;"
onclick="changeGreen();">
Green
</div>
</body>
<script>
const changeGreen = () => {
const green_div = document.getElementById("green-tag");
green_div.style.color = "green";
const top_amt = green_div.style.top;
green_div.style.top = @BT@${(top_amt.match(/\d+/) - .75)}in@BT@;
setTimeout(() => {
green_div.style.color = "red";
green_div.style.top = top_amt;
}, 5000);
}
</script>
</html></nowiki>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Stroop</title>
</head>
<body>
<div id="text" onclick="goGreen();" style="position: absolute; top: 1in; font-size: 32pt; color: red;">Green!</div>
<script>
function goGreen() {
myText = document.getElementById("text");
myText.style.top = "0.25in";
myText.style.color = "green";
setTimeout(() => {
myText.style.top = "1in";
myText.style.color = "red";
}, 5000);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Stroop</title>
</head>
<body>
<div id="text" onclick="goGreen();" style="position: absolute; top: 1in; font-size: 32pt; color: red;">Green!</div>
<script>
function goGreen() {
myText = document.getElementById("text");
myText.style.top = "0.25in";
myText.style.color = "green";
setTimeout(() => {
myText.style.top = "1in";
myText.style.color = "red";
}, 5000);
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<title>Stroop</title>
</head>
<body>
<div id=“green” style="color: red; top: 1in; font-size: 32pt onClick="moveGreen();”>
<p>Green!</p>
</div>
<script>
function moveGreen()
{
element = document.getElementById(‘green’);
element.style.top = 0.75 + 'in';
element.style.color = "green";
setTimeout(()=> {
element.style.color = "red";
element.style.top = 1 + 'in';
}, 5000);
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<title>Stroop</title>
</head>
<body>
<div id=“green” style="color: red; top: 1in; font-size: 32pt onClick="moveGreen();”>
<p>Green!</p>
</div>
<script>
function moveGreen()
{
element = document.getElementById(‘green’);
element.style.top = 0.75 + 'in';
element.style.color = "green";
setTimeout(()=> {
element.style.color = "red";
element.style.top = 1 + 'in';
}, 5000);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stroop</title>
<style>
#divText {
font-size: 32px;
color: red;
position: absolute;
top: 5in;
}
</style>
<script>
let onClick = () => {
divText = document.getElementById("divText");
divText.style.top = "4.25in";
divText.style.color = "green";
setTimeout(() => {
divText.style.top = "5in";
divText.style.color = "red";
}, 5000);
};
</script>
</head>
<body>
<div id="divText" onclick="onClick();">Green!</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stroop</title>
<style>
#divText {
font-size: 32px;
color: red;
position: absolute;
top: 5in;
}
</style>
<script>
let onClick = () => {
divText = document.getElementById("divText");
divText.style.top = "4.25in";
divText.style.color = "green";
setTimeout(() => {
divText.style.top = "5in";
divText.style.color = "red";
}, 5000);
};
</script>
</head>
<body>
<div id="divText" onclick="onClick();">Green!</div>
</body>
</html>
(c) 2024 Yioop - PHP Search Engine