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

Question

我只是在学习 HTML、CSS 和 Javascript，并且很难掌握 JS。 我已经在这个简单的问题上工作了 6 个小时。 我查看了很多关于 SO、W3 的帖子，重新阅读了 Jon Duckett 书中的相关章节，并尝试了代码中我能想到的所有组合。

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

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元素中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>