Posts

Showing posts with the label input

Reset/Submit button won't work once text area is edited by user?

Reset/Submit button won't work once text area is edited by user? My form's reset and submit buttons do not work when I edit the output of the form in the textarea. I created a form that outputs custom sentences based on user inputs. If I don't edit the textarea these buttons work fine, resetting or resubmitting onclick. However, if I edit the textarea all functionality seizes. Any ideas? Thanks! <3 <!DOCTYPE html> <html> <head> <title>Experiment</title> <style type="text/css"> table,td,th{ margin-left: auto;margin-right: auto } .display{ display: flex;align-items: center;justify-content: center; } p{ text-align: center; } textarea{ display: block;margin-left:auto;margin-right: auto; } </style> function sentence(){ document.getElementById("s1").style.display= 'block'; document.getElementById("r1").style.display= 'blo...

React populating a dropdown from an input field

React populating a dropdown from an input field I have a simple React app that allows you to create multiple "story" components when you click a button. Each "story" has two components - an input field (to edit the story title) and a dropdown list (showing all other story titles). I’m trying to get the story dropdown list to populate with all the story titles (at the moment they are hard coded to a state array called storyOptions). The end idea is - User creates new story > user updates story title > user chooses another story to link to from the dropdown (dropdown shows the titles of all the other stories). My current code is below... class App extends Component { constructor(props) { super(props); this.storyList = ; this.state = {storys: this.storyList}; } addNewStory(e) { this.storyList.push({ id: this.storyList.length, title:"Type your story title here", }); this.setState({storys: this.storyList}); } ...