0
私は現在、ドロップダウンメニューでテキストを選択した後、並んで表示されるテキストの3つの翻訳を取得しようとしています。これまでのところ、問題なく動作する最初のメニューがありますが、2番目と3番目のメニューは協力していません。私はこれが何らかのネスティングエラーであると仮定しますが、私はそれを理解できません。どのように3つのすべてのフィールドセットのjavascriptを動作させるのですか？ここで並んでいる3つのフィールドセット
<html>
<head>
<style>
body
{
background-image:url('gradient1.jpg');
background-repeat:repeat-x;
}
.ex
{
margin:auto;
width:90%;
padding:10px;
border:outset;
}
select
{
display:inline;
cursor:pointer;
}
form{
display:inline-block;
width: 550px;
}
</style>
</head>
<body>
<div class="ex">
<form action="#" method="post" id="demoForm">
<fieldset>
<legend>Select Translation</legend>
<p>
<select id="scripts" name="scripts">
<option value="scroll">Orignal Greek</option>
<option value="tooltip">Original Latin</option>
<option value="con_scroll">English Translation</option>
</select>
<br>
<p>
<input type="button" id="showVal" value="Select" />
</p>
<output type="text" size="30" name="display" id="display" />
</p>
</fieldset>
</form>
<form action="#" method="post" id="demoForm2">
<fieldset>
<legend>Select Translation</legend>
<p>
<select id="scripts" name="scripts">
<option value="scroll">Orignal Greek</option>
<option value="tooltip">Original Latin</option>
<option value="con_scroll">English Translation</option>
</select>
<br>
<p>
<input type="button" id="showVal" value="Select" />
</p>
<output type="text" size="30" name="display" id="display" />
</p>
</fieldset>
</form>
<form action="#" method="post" id="demoForm3">
<fieldset>
<legend>Select Translation</legend>
<p>
<select id="scripts" name="scripts">
<option value="scroll">Orignal Greek</option>
<option value="tooltip">Original Latin</option>
<option value="con_scroll">English Translation</option>
</select>
<br>
<p>
<input type="button" id="showVal" value="Select" />
</p>
<output type="text" size="30" name="display" id="display" />
</p>
</fieldset>
</form>
</div>
</body>
<script>
(function() {
// get references to select list and display text box
var sel = document.getElementById('scripts');
var el = document.getElementById('display');
function getSelectedOption(sel) {
var opt;
for (var i = 0, len = sel.options.length; i < len; i++) {
opt = sel.options[i];
if (opt.selected === true) {
break;
}
}
return opt;
}
// assign onclick handlers to the buttons
document.getElementById('showVal').onclick = function() {
el.value = sel.value;
}
document.getElementById('showTxt').onclick = function() {
// access text property of selected option
el.value = sel.options[sel.selectedIndex].text;
}
document.getElementById('doLoop').onclick = function() {
var opt = getSelectedOption(sel);
el.value = opt.value;
}
}());
// immediate function to preserve global namespace
</script>
は – Gabs00
は、コードを編集動作します。それは今働く。 – Sreekanth