Yes, there are many issues there. How about we start from first principles.
Here is the form, using standard lower-case tags, and no inline scripting events. They went out with the dinosaurs.
<form id="myForm">
<p>
<select name="select1">
<option value = "1">Value 1</option>
<option value = "2">Value 2</option>
<option value = "3">Value 3</option>
</select>
</p>
</form>
Notice that the form has an identifer called “testForm”. If the form is to get registration information from a person, you might use “registration” instead. If the form was to pay a nigerian banker so you can get off-shore funds, it could be “419scam” for the identifer. You get my drift.
Also, the form elements must be contained within block-level elements. That can be a paragraph, or a fieldset, or other elements like a div if you plan some fancy layouts. The reason they must be within block-level elements is so that unstyled views of the page can still achieve a reasonable usability. I know that you didn’t use breaks in your form, but please don’t be tempted to use them. Unless you’re dealing with poetry or street addresses, there are better solutions available.
The script that attaches the onchange event to the select element, is placed at the end of the page. This is a common practice, which allows the page to load up faster than when scripts are in the head.
<body>
...
<script type="text/javascript" src="js/script.js">
</body>
</html>
The script will do two things. It will contain the function that you want to run, and it will attach an event on to the select field, that will call the previously mentioned function.
Attaching the function to the select field via scripting achieves two main benefits. First, it cleans up the HTML code so that you don’t have inline scripting embedded with the code. That’s about as bad as using inline CSS code, which is enough to give the shudders to almost any CSS coder.
The second main benefit is that using javascript to attach the event means that the element is automatically available from the function via the this keyword.
js/script.js
var form = document.getElementById('testForm');
form.elements.select1.onchange = checkSelect;
Functions can also be called for a variety of reasons, so it would be silly to have an onblur event call the OnChange function. Instead of naming it by how it’s called, it’s now named more semantically by being called checkSelect.
js/script.js
...
function checkSelect() {
var myindex = this.selectedIndex;
var SelValue = this.options[myindex].value;
if (SelValue === "2") {
console.log('Yes this script works');
} else {
console.log('NO');
}
}
Previously the selected value was being assigned the value of ‘2’, using the = sign. To compare it, you can use == ‘2’ but that can allow all sorts of other things to match, so you really should use === ‘2’ instead.
The console.log that is used is accessible on many modern web browsers by using ctrl+shift+j but for other web browsers, like Internet Explorer, you can use the following (which I ran up just now) to show the log on the screen instead.
js/console.js
window.console = window.console || {
textarea: document.getElementById('console'),
createTextArea: function () {
var textarea = document.createElement('textarea');
textarea.id = 'console';
textarea.rows = 8;
textarea.cols = 30;
document.body.appendChild(textarea);
this.textarea = document.getElementById('console');
},
log: function (message) {
if (!this.textarea) {
this.createTextArea();
}
this.textarea.value += message + '\
';
}
};
So in the end, this is the full HTML code
<html>
<head>
</head>
<body>
<form id="testForm">
<p>
<select name="select1">
<option value = "1">Value 1</option>
<option value = "2">Value 2</option>
<option value = "3">Value 3</option>
</select>
</p>
</form>
<script type="text/javascript" src="js/console.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>