Javascript：将用户输入分配为变量

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>

Answer 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>

Answer 2

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>