javascript - 选择单选输入时修改占位符属性

选择单选按钮时，我正在尝试更新HTML5占位符属性。我没有使用JQuery，因此希望使用内联JavaScript解决方案。我知道我缺少一些简单的东西，但是我想自学！

<script type="text/javascript">
function ModifyPlaceHolder1 () {
var input = document.getElementById ("MyQuery");
input.placeholder = "Search books e.g. Harry Potter";
}
function ModifyPlaceHolder2 () {
var input = document.getElementById ("MyQuery");
input.placeholder = "Search journals e.g. New Scientist";
}
</script>


<input type="text" id="MyQuery" placeholder="Search resources" name="q" />
<input type="radio" value="" id="All" name="s.cmd" checked="checked" />
<label for="All">All</label>
<input type="radio" onclick="ModifyPlaceHolder1 ()" value="" id="Books" name="s.cmd" checked="checked" />
<label for="Books">Books</label>
<input type="radio" onclick="ModifyPlaceHolder2 ()" value="" id="Journals" name="s.cmd" checked="checked" />
<label for="Journals">Journals</label>

最佳答案

这是无需任何内联JS即可实现的方法。一点点更清洁，更易于跟踪（IMO）。

<input type="text" id="MyQuery" placeholder="Search resources" name="q" />
<input type="radio" value="" id="All" name="s.cmd" checked="checked" />
<label for="All">All</label>
<input type="radio" value="" id="Books" name="s.cmd" checked="checked" />
<label for="Books">Books</label>
<input type="radio" value="" id="Journals" name="s.cmd" checked="checked" />
<label for="Journals">Journals</label>

var books = document.getElementById("Books");
var journals = document.getElementById("Journals");
var input = document.getElementById("MyQuery");

books.onclick = function() {
    input.placeholder = "Search books e.g. Harry Potter";
}

journals.onclick = function() {
    input.placeholder = "Search journals e.g. New Scientist";
}