I've Searched The Web So Much But For Some Reason, My Code = No Work;

My JavaScript:

let a = document.getElementById("a");
let b = document.getElementById("b");
let c = document.getElementById("c");
let button = document.getElementById("button");

button.onclick = function() {    
    var info = {"a": a.value, "b": b.value, "c": c.value};
    console.log(info.a   info.b   info.c);
}

Everything Except The C One Works, Which Is A Dropdown(A And B Are Textboxes).

HTML:

<button type = "button" id = "button">Button</button>
<input type = "text" id = "a">
<br><br>
    
<input type = "text" id = "b">        
<br><br>

<select name = "c" class = "c">
<option value = "c1" class = "c" selected>c1</option>
<option value = "c2" class = "c">c2</option>
<option value = "c3" class = "c">c3</option>

CodePudding user response：

Your HTML has problems. <input type = "text" id = "a">A</input> is wrong, it should be like this: <input type = "text" id = "a" value="A"/> and only then you will get the "value" of this field. Same holds true for your second text box. Also add "id" to the select box.

CodePudding user response：

1. you are missing an closing quote for id = "button
2. There is no id named c .

CodePudding user response：

First issue is that <select name = "c" class = "c"> you have to make it id instead of class. Also Button HTML is bit wrong <button type = "button" id = "button>Button</button> instead it should be <button type = "button" id = "button">Button</button> After that it should work. If it still does not work then you can wrap JS code in window.onload function.

window.onload = function() {
        let a = document.getElementById("a");
        let b = document.getElementById("b");
        let c = document.getElementById("c");
        let button = document.getElementById("button");
        button.onclick = function() {
            var info = {"a": a.value, "b": b.value, "c": c.value};
            console.log(info.a   info.b   info.c);
        }
    }

CodePudding user response：

I'll just cover some of the points the others have raised first.

1. Missing quote mark on id="button which makes your HTML invalid.

2. No id on the select element.

3. No </select> tag.

4. Having the same class on the options as well as the select seems odd.

5. The text content you're ascribing to A should be added as a value attribute to the element, and there's no reason to have a </input> tag.

So I've removed all those issues.

1. I've switched out all the ids for classes to make things consistent, and use querySelector to pick up those elements. I removed the button ID altogether.

2. I've used addEventListener on the button instead of onclick which is a slightly more modern approach for dealing with events.

let a = document.querySelector('.a');
let b = document.querySelector('.b');
let c = document.querySelector('.c');
let button = document.querySelector('button');

button.addEventListener('click', handleClick, false);

function handleClick() {
  const  info = { a: a.value, b: b.value, c: c.value };
  console.log(info.a   info.b   info.c);
}

<button type="button">Button</button>
<input type="text" value="A" >
<br><br>
<input type="text" >
<br><br>
<select name="c" >
  <option value="c1" selected>c1</option>
  <option value="c2">c2</option>
  <option value="c3">c3</option>
</select>