User input (Buttons and text)
Buttons
To make a button you should probably use the button tag. You can also use an input tag if you really want, but button is a bit easier.
You know when someone clicks a button by listening for the click event.
<button id="a-button">This is a button</button>
<input type="submit" value="This is also a button" id="another-button">
<script>
d3.select("#a-button").on('click', function() {
console.log("You clicked the first button")
});
d3.select("#another-button").on('click', function() {
console.log("You clicked the second button")
});
</script>Text input
You have two choices with text input - one for shorter input and one for longer input. You’ll use the shorter one 99.999% of the time.
To get the contents of a text input, you select your element and then use .property('value').
...
<strong>Your name:</strong>
<input type="text" id="your-name" placeholder="What's your name?">
<br>
<textarea id="biography">Enter your biography</textarea>
<button id="go-button">Click this and look in the console</button>
<script>
d3.select("#go-button").on('click', function() {
var name = d3.select("#your-name").property('value');
var bio = d3.select("#biography").property('value');
console.log("Your name is");
console.log(name);
console.log("Your bio is");
console.log(bio);
});
</script>You can also listen for each time a user presses a key in the input field, just in case you want to do the quick-reactive searching like Google does.
...
<input type="text" id="your-input" placeholder="Type in here and look at the console">
<script>
d3.select("#your-input").on('input', function() {
var content = d3.select(this).property('value');
console.log(content);
});
</script>