Javascript:将用户输入赋值为变量
Javascript: Assigning User Input as a Variable
我正在学习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>
由于您是使用元素的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>
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变量赋值|
- 如何在javascript中为全局变量赋值
- 未设置变量的赋值| jQuery的作用是什么
- 我可以在javascript中的回调函数中为变量赋值吗
- 如何在不赋值数组变量的情况下读取数组数据
- JavaScript 变量赋值的行为令人惊讶
- 为什么 Javascript 在变量赋值时将 null 转换为字符串
- JavaScript: 变量赋值 in for 语句 |在前面或里面
- 在 IF Javascript 中赋值变量
- 变量“this”上下文在重新赋值变量后未更新
- 在赋值变量中查找值
- 赋值变量新值以更改元素节点值
- 给对象赋值.变量动态形成
- 如何在函数内部使用赋值变量,在函数之外
- Javascript赋值变量if为nil
- 从可能未定义的字段中赋值变量
- 量角器在赋值变量时抛出错误
- 用$. getjson赋值变量
- jQuery使用click()赋值变量
- mongodb在赋值变量时打印结果