Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

teresemartyn
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
teresemartyn
Front End Web Development Techdegree Graduate 21,879 Points
Posted by teresemartyn
.a{fill-rule:evenodd;}techdegree seal-36
teresemartyn
Front End Web Development Techdegree Graduate 21,879 Points

DOM scripting on a <form>. Cannot get the text to display on text field (dog_name) when image is clicked.

I want the user to click on an image(photo of my dog) and take the name of that image (Jack) and place in in the name field. The name field in in a <form>.

// JS var dogFaceTwo = document.getElementById("imageTwo"); var onClickTwo = function () { document.getElementById("messageTwo").textContent += "Ellie"; } dogFaceTwo.addEventListener("click", onClickTwo);

//HTML <form= action="#" method="post" id="agilityForm" class="agilityForm"> <fieldset> <legend>Agility Point Tracker</legend>

        <input type="image" id="image" alt="dogPhoto" width=50 height=50 src="IMG_0033.jpg"><br>
        <div id="message"></div>

        <input type="image" id="imageTwo" alt="dogPhotoTwo" width=50 height=50 src="IMG_4852.jpg"><br>
        <div id="messageTwo"></div><br>
        <label for="dog_name" class="required">Dog Name:</label>
        <input type="text" autofocus dog_name="dog_name" id="dog_name" required
            title="Please enter your dog's name"> <br>

2 Answers

Kevin D
Kevin D
8,646 Points
Kevin D
Kevin D
8,646 Points

You could try adding this to your current code:

var dogImageElement = document.querySelector('#image');

dogImageElement.addEventListener('click', function() {
  var inputTextElement = document.querySelector('#dog_name');
  inputTextElement.value = 'Jack';
});
Steven Parker
Steven Parker
229,608 Points
Steven Parker
Steven Parker
229,608 Points

The code is working, but it's designed to append the name "Ellie" into the div "messageTwo" below the image.

To put the name "Jack" into the form entry box "dog_name" you could do this instead:

  document.getElementById("dog_name").value = "Jack";
Steven Parker
Steven Parker
229,608 Points
Steven Parker
Steven Parker
229,608 Points

You liked the 2-line solution better than this one-liner?