Skip to content

Instantly share code, notes, and snippets.

@itochan

itochan/ex05-1.html

Created November 1, 2019 08:20
Show Gist options
  • Save itochan/993ca5c9f5b89de281793769f0e3cb0d to your computer and use it in GitHub Desktop.
Save itochan/993ca5c9f5b89de281793769f0e3cb0d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ex05-1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演習: classを用いた書き換え</title>
<script src="ex05-1.js"></script>
</head>
<body>
<input type="text" id="replaceText" size="30" placeholder="何に変えようかな〜♪"><br>
<input type="button" value="ccc" onclick="replaceCcc();"><br>
<input type="button" value="aaa bbb" onclick="replaceAaaAndBbb();">
<p class="aaa">要素1</p>
<p class="aaa bbb">要素2</p>
<p class="ccc aaa bbb">要素3</p>
<p class="aaa bbb ccc">要素4</p>
<p class="aaa bbb">要素5</p>
</body>
</html>
Raw
ex05-1.js
function replaceCcc() {
var replaceText = document.getElementById("replaceText").value;
var targetElements = document.getElementsByClassName("ccc");
for (var i = 0; i < targetElements.length; i++) {
targetElements[i].innerHTML = replaceText;
}
}
function replaceAaaAndBbb() {
var replaceText = document.getElementById("replaceText").value;
var targetElements = document.getElementsByClassName("aaa bbb");
for (var i = 0; i < targetElements.length; i++) {
targetElements[i].innerHTML = replaceText;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment