Javascript:将用户输入赋值为变量

Question

我正在学习HTML, CSS和Javascript，并且很难掌握JS。我已经花了6个小时研究这个简单的问题。我查阅了大量关于SO、W3的文章，重新阅读了Jon Duckett书中的相关章节，并尝试了我能想到的所有代码组合。

我需要做的是从输入字段中获取用户名，并通过函数运行它以某种方式更改它。我看过其他人的帖子，有类似的问题，但还没有能够创建一个解决方案。不断发生的问题是，当我把应该是用户输入的东西放回页面时，它使用的是实际的单词name.toUpperCase()，而不是我给变量name的值。我试着在自己的语句中将名称转换为大写，然后分配一个变量，但这也不起作用。似乎我的js从来没有给"name"一个值开始。

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

由于您是使用元素的id检索输入值，因此不需要表单。

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

name变量目前指的是DOM元素。value属性返回在input元素中输入的数据。

value属性设置或返回文本字段的value属性的值。

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>