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检索输入值，因此无需表单。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

2 个答案: