Javascript: Assigning User Input as a Variable

Question

I'm just learning HTML, CSS, and Javascript and having a tough time grasping the JS. I've been working on this simple issue now for literally 6 hours. I've checked plenty of posts on SO, W3, re-read relevant chapters in Jon Duckett's book, and tried every combination I could think of in the code.

What I need to do is take a username from an input field and run it through a function to change it in some way. I've seen other's posts with similar questions but haven't been able to create a solution yet. The issue that keeps happening is that when I place what should be the user input back to the page it uses the actual words name.toUpperCase() rather than the value I've given the variable name. I tried converting the name to uppercase in its own statement and then assigning that a variable, but that didn't work either. It seems like my js is never giving "name" a value to begin with.

JS:

var name = document.getElementById('nameEntry');
var compliment = document.getElementById('compliment');
var input = document.getElementById('submitjs');

input.onclick = transformName;

function transformName () {
    var elcompliment = document.getElementById('compliment');
    elcompliment.textContent = 'name.toUpperCase( )' + ' YOU ROCK!';
};

HTML:

<div class="jsform">
    <h2> Enter your name and see it change!</h2>
    <input type="text" name="nameEntry" id="nameEntry" />
    <input type="submit" name="submitjs" value="submit" id="submitjs"/>

   <div>
    <p id="compliment">Great Job!</p>
   </div>

</div>

You just as singing input went to variable name not it's value , to do so use. var name = document.getElementById('nameEntry');.value; — Ashish Bhagat
– Ashish Bhagat, Commented Oct 16, 2016 at 17:25

Edmar Miyake · Accepted Answer · 2016-10-16 17:27:14Z

1

Since you are retrieving input value using element's id, there is no need for form.

function transformName () {
  var name = document.getElementById('nameEntry').value;
  var compliment = document.getElementById('compliment');

    compliment.innerHTML  = name.toUpperCase( ) + ' YOU ROCK!';
};

<div class="jsform">
    <h2> Enter your name and see it change!</h2>
    <input type="text" name="nameEntry" id="nameEntry" />
    <input type="button" onclick="transformName()" value="Transform me"/>

   <div>
    <p id="compliment">Great Job!</p>
   </div>

</div>

answered Oct 16, 2016 at 17:27

Edmar Miyake

12.4k3 gold badges40 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GR Miller Over a year ago

dude I appreciate it this so much. Obviously that works, what I don't understand is where I was using a form?

Edmar Miyake Over a year ago

Since you're using submit button instead of a regular button, and there is a class called jsform, I assumed there was a form wrapping jsform.

Mini Bhati · Accepted Answer · 2016-10-16 17:55:13Z

The name variable currently refers to DOM element. The value property returns the data entered in the input element.

The value property sets or returns the value of the value attribute of a text field.

var name = document.getElementById('nameEntry').value;
var compliment = document.getElementById('compliment');
var input = document.getElementById('submitjs');

input.onclick = transformName;

function transformName () {
    var name = document.getElementById('nameEntry').value;
    var elcompliment = document.getElementById('compliment');
    elcompliment.innerHTML = name.toUpperCase()+' YOU ROCK!';
};

<div class="jsform">
  <h2> Enter your name and see it change!</h2>
  <input type="text" name="nameEntry" id="nameEntry" />
  <input type="submit" name="submitjs" value="submit" id="submitjs" />

  <div>
    <p id="compliment">Great Job!</p>
  </div>

</div>

Collectives™ on Stack Overflow

Javascript: Assigning User Input as a Variable

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related