Pete Pete - 4 days ago 5
HTML Question

HTML Confirming selection with button

I'm trying to make a simple HTML page that allows you to select the option either copy, lower case or upper case, which respectively copy into text2, change the text to uppercase or to lowercase, and select the choice on click.
Could anyone take a look at my code?

<script type='text/javascript'>
function f(){
if(document.getElementById("copy"))
document.getElementById("modifiedForm").value = document.getElementById("ogForm").value;
if(document.getElementById("upper"))
document.getElementById("modifiedForm").value = document.getElementById("ogForm").value.toUpperCase();
if(document.getElementById("lower"))
document.getElementById("modifiedForm").value = document.getElementById("ogForm").value.toLowerCase();
}
</script>
<form name='form1' >
<select size='3' name='sel1' > <!-- onchange='f();'> -->
<option id="copy"> copy </option>
<option id="upper"> upper case </option>
<option id="lower"> lower case </option>
</select>
<input type='text1' id='ogForm' placeholder="type here" >
<input type='text2' id='modifiedForm'>
<input type='button' id='confirm' value='confirm' onclick='f()'>
</form>

Answer

You are trying to check which was the element that was selected as part of the select element.

use the value attribute of the dropdown to get the option that was selected

HTML

<select size='3' name='sel1' id="mySelect"> 
   <option value="copy">  copy       </option>
   <option value="upper"> upper case </option>
   <option value="lower"> lower case </option>

JS

function f() {
     var selectValue = document.getElementById("mySelect").value;

     if(selectedValue === 'copy') {

     ....
Comments