使用javascript通过文本字段更改段落

时间:2014-04-17 16:12:21

标签: javascript html

我想在文本字段中键入文本,按一个按钮,段落的文本将会更改。我需要做些什么来实现这一点,除了javascript之外还有更简单的方法吗?

由于我不知道自己需要做什么,这里是我原来的代码:

<html>
<head>
    <title>Moving Text</title>
    <link rel="stylesheet" type="text/css" href="stlye.css">
</head>
<body>
<div id="text">
    <p id="new">new text</p>
    Main News:<input type="text" name="update"><br>
    <input type="button" value="Update" onClick="update();">
<script type="text/javascript"> 
    function update(){
        document.getElementById('new').innerHTML = 'Update';
    } 
</script>           
</div>
</body>

我很确定这是错误的还是离开的。有什么建议吗?

2 个答案:

答案 0 :(得分:2)

HTML:

<p id="your_paragraph">This text will change, after clicking the button.</p>
Main News: <input type="text" id="theText" />
<input type="button" id="btn" value="Update" />

JavaScript的:

var p = document.getElementById('your_paragraph');
var btn = document.getElementById('btn');
var txt = document.getElementById('theText');
btn.onclick = function(){
    p.textContent = txt.value;
};

http://jsfiddle.net/3uBKC/

答案 1 :(得分:0)

不,您需要使用javascript。如果没有标记示例,则没有人能够为您提供具体示例,但这是使用jQuery库的一般示例。

// get the textarea, watch for change, paste, and keyup events
$('textarea').on('change paste keyup', function(){

    // Store the text field as a variable, get it's value
    var thiis = $(this),
        value = thiis.val();

    // replace the paragraph's content with the textrea's value
    $('p').html(value);
});