如何更改 <input> 标签 javascript 的文本值

How do I change the text value of an <input> tag sung javascript

本文关键字：javascript 文本 标签 input 何更改      更新时间：2023-09-26

我似乎无法弄清楚这个简单的任务。我有一个输入文本字段，我想接受一个值，并更改单击链接时的值。我的 HTML 代码如下：

<body>
    <div id="outsideContainer">
    <div id="guessContainer">
        <h3> Guess a number between 1 and 10 </h3>
        <input id="txtfield" name="txtfield" type="text" class="value"/><br>
        <a href=" " class="query"> Submit here </a> 
    </div>
    <div id="guessShow">
        <p class="hotter hideStuff" > Getting Hotter!! </p>
        <p class="colder hideStuff"> Getting Colder, BRRR!!! </p>
        <p class="gotIt hideStuff"> Awesome! You have guessed the number </p>
    </div>
    </div>
    </body>

我想做的是将带有class ="value"的标签中显示的文本更改为某些内容。我试过使用 

jQuery(document).ready(function(){
         $('.query').on('click', function(){
            $(this).closest('#guessContainer').find('.value').css("value", "whoa");
            });
            });

但它不起作用。我还尝试使用 .css 方法并为输入分配一个值，但这也没有用。任何帮助将不胜感激。

尝试使用.attr() 

   $(this).closest('#guessContainer').find('.value').attr("value", "whoa");

或

 $(this).closest('#guessContainer').find('.value').val("whoa");

$(document).ready(function() {
    $('.query').on('click', function() {
        $('#guessContainer .value').val("whoa");
    });
});

这将起作用。不使用 .css() 函数来分配值，因为您尝试更改的不是 CSS 属性。

您可以使用 val 方法;您还可以简化选择器，因为您使用的是 ID：

$('#guessContainer input.value').val("whoa");

输入的值与 css 无关。尝试仅使用 

document.getElementByID('myInputId').value = newValue;

或者在 JQuery 中

$('#myInputId').val(newValue);

因此，在您的示例中，您可以将单击处理程序函数更改为如下所示的内容：

$(this).closest('#guessContainer').find('.value').val("whoa");
});
你也可以在

jQuery 对象上使用普通的 JavaScript 设置值：

$('#guessContainer').find('.value')[0].value= "whoa";

JSFiddle 演示

相关文章：