Exercise: D3 and HTML Forms

set up new project

create new project called forms with the following components
1. d3.js file
2. index.html file with body tag
3. main.js file
link index.html file to d3.js and main.js

Create Form

In the HTML file.

create a form with the <form> tag.
create a label element inside of the form

create input of type radio

 <head>
     <meta charset="utf-8">

 </head>

 <body>
     <form>
         <label>
             <input type ="radio" name="city_button"
                 value="honolulu" />
                 Honolulu
         </label>

      </form>
 </body>

Create Label For Each City

Separate with a <br> to create a new line for each city.

    <br>
    <label>
        <input type="radio" name="city_button"
            value="chicago" />
            Chicago
    </label>

select input tag using `d3.selectAll`

in main.js, create a variable called buttons.
```
    var buttons
```
assign buttons to the result of d3.selectAll(...

The name of the HTML element you are selecting is called, 'input'.

       var buttons = ... fill in this area ...

create named function getChange

create a named function called, getChange.
```
 function getChange() ...
```
in the function, output to console.log, this.value.

Note: The value comes from the value of the input label.

run function when button state changes

buttons.on("change", getChange);

buttons is the variable holding all the input sections
on is a special keyword
change is a special keyword
getChange is the name of the function to run.

Entire Code Listing

    var buttons = d3.selectAll("input");

    function getChange(){
        console.log("Got change to " + this.value);
    }

    buttons.on("change", getChange);

codetricity/d3-html-form.md

Select an option

No results found

Select an option

No results found

Exercise: D3 and HTML Forms

set up new project

Create Form

Create Label For Each City

select input tag using `d3.selectAll`

create named function getChange

run function when button state changes

Entire Code Listing

codetricity/d3-html-form.md

Exercise: D3 and HTML Forms

set up new project

Create Form

Create Label For Each City

select input tag using d3.selectAll

create named function getChange

run function when button state changes

Entire Code Listing

select input tag using `d3.selectAll`