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

Question

我刚刚学习 HTML、CSS 和 Javascript，很难掌握 JS。我现在已经花了 6 个小时来解决这个简单的问题。我检查了很多关于 SO、W3 的帖子，重新阅读了 Jon Duckett 书中的相关章节，并在代码中尝试了我能想到的每种组合。

我需要做的是从输入字段中获取用户名，并通过函数运行它以某种方式更改它。我看过其他人的帖子有类似的问题，但还无法创建解决方案。不断发生的问题是，当我将用户输入的内容放回页面时，它使用实际的单词 name.toUpperCase() 而不是我赋予变量 的值名称。我尝试在其自己的语句中将名称转换为大写，然后为其分配一个变量，但这也不起作用。看来我的 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>