How do you get a value from a text field? - html

Question

I suppose this should be straightforward, but I'm stuck to get that "cpsc" value. I tried to google this, and almost all of the search results told me to use ".value". But this particular class "control term" doesn't seem to work, and only returned "undefined".
<div class="control term">
<input type="text" value="cpsc">
</div>
My code:
document.getElementsByClassName("control term")[0].value;

Answer 1

You are reading from the div. You should read from input instead.
<div class="control term">
<input id="inputTag" type="text" value="cpsc">
</div>
document.getElementsBYId("inputTag").value;

Answer 2

The problem is that the class "control term" is on the div element and not your input. Also as a note, a class should be only one word (ie. controlTerm), having a space between them assigns two different classes to the div: control, and, term.
You have two options:
Add a class to your input
Get the child of document.getElementsByClassName("control term") and then extract its value.
Hope this helps
<div class="control">
<input class="term" type="text" value="cpsc">
</div>
document.getElementsByClassName("term")[0].value;

Answer 3

<div>
<input type="text" value="cpsc" class="control term">
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert(document.getElementsByClassName("control term")[0].value);
}
</script>
You have to put class attribute in input tag

Answer 4

You need to add class to your input and then you can get the value of input using the following code.
<div class="control term">
<input type="text" class = "test" value="cpsc">
</div>
<button onclick = "myFunction()">Click me</button>
<script>
function myFunction(){
alert(document.getElementsByClassName("test")[0].value);
}
</script>
If you have multiple input box with same class name inside "control term" div, you can access their values using following code.
<div class="control term">
<input type="text" class = "test" value="cpsc">
<input type="text" class = "test" value="cpsc1">
</div>
<button onclick = "myFunction()">Click me</button>
<script>
function myFunction(){
alert(document.getElementsByClassName("test")[0].value);
alert(document.getElementsByClassName("test")[1].value);
}
</script>
Or if you want to get all values of input box inside "control term" div, you can do something like this.
<div class="control term">
<input type="text" class = "test" value="cpsc">
<input type="text" class = "test" value="cpsc1">
</div>
<button onclick = "myFunction()">Click me</button>
<script>
function myFunction(){
var x = document.getElementsByClassName("control term");
for(var i = 0;i<=x.length;i++){
alert(x[0].getElementsByClassName("test")[i].value);
}
</script>
Hope this will help you.