How to get input value for display

I’m a novice and I must be missing something quite fundamental. Appreciate any help.
I’m trying to get user-inputted text for display in the html. I can’t get the quality variable to update so it will be passed to the update function.
Here’s my code.

<form>
		<input id="field" type="text" value="enter quality" >
		<button id="button">Submit</button>
	</form>
	
	<div id="affirmation">Affirmation</div>
	
var $affirmation = document.getElementById("affirmation");

function update(place, quality) {
	var p = place.firstChild || document.addElement('p');
	p.textContent = quality;
	place.appendChild(p);
}

function getQuality() {
	var $button = document.getElementById('button');
	var $field = document.getElementById('field');
	
	$button.addEventListener('click', function() {
		var quality = $field.value;
	});
	console.log(quality);
}

update($affirmation, quality);

Thanks

If you are only interested in inserting the field value into the affirmation div you might like to try the following script. In the interests of clarity, it is not a good idea to prefix your variables with $ as it might be confused with JQuery nomenclature. Also, addEventListener will not work in IE 7 or 8 as attachEvent is used instead in these browsers.

<div id="wrap">
  <input id="field" type="text" value="enter quality" size="20">
  <input type="button" id="button" value="GO">
  <div id="affirmation">
    Affirmation</div>
</div>
<script type="text/javascript">
    var affirmationObj, buttonObj, fieldObj;
    affirmationObj = document.getElementById("affirmation");
    buttonObj = document.getElementById('button');	
    fieldObj = document.getElementById('field');
  //		
     buttonObj.addEventListener('click', 
       function() {
         var quality = fieldObj.value;
         affirmationObj.innerHTML=quality;
	});
 </script>

Here is an even simpler way of doing it, making use of the onblur handler on the text field. The button is now only used to get the blur event to fire and has no handler of its own.

<div id="wrap">
  <input id="field" type="text" value="enter quality" size="20">
  <input type="button" value="GO">
  <div id="affirmation">
    Affirmation</div>
</div>
<!-- end wrap -->
<script type="text/javascript">
    var affirmationObj, fieldObj;
    affirmationObj = document.getElementById("affirmation");
    fieldObj = document.getElementById('field');
    fieldObj.addEventListener('blur', function(){
         affirmationObj.innerHTML=this.value; 
	  });
 </script>
1 Like

Thank you so much, @AllenP. I’ll study ‘innerHTML’ some more and ‘this’.

I’m going through Darren Jones’ book “JavaScript Novice to Ninja,” which is where I got the idea of putting a $ in front of DOM references. I agree with you and will stop doing that now.

I notice you added ‘Obj’ to the variable names. When I get back to my office, I’ll look into the object nature of those div’s. Is that why you added that bit to them?

Thanks again. This whole js thing is going to be fun!
~ Christine

When you write document.getElementById("affirmation") you are getting a reference to the div with id=“affirmation”. This div is an object and has a list of properties which you can use or add to. I like to add “Obj” to the id name to make it clear that I am referring to the object in my code.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.