CODEWITHSUNDEEP
javascripthtml
FreeFire
FreeFire

Reputation: 169

Changing a paragraph via a text field using javascript

I want to type in text in a text field, press a button, and the text of a paragraph will change. What would I need to do for this to happen and is there an easier way to do it other than javascript?

Since I didn't know what I needed to do, here's the code I originally had:

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

I'm pretty sure it's wrong or way off. Any suggestions?

Upvotes: 2

Views: 9831

Answers (2)

technopeasant
technopeasant

Reputation: 7939

No, you'll need to use javascript. Without an example of your markup nobody will be able to provide you a specific example, but here's a general one using the jQuery library.

// 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);
});

Upvotes: 0

Alex W
Alex W

Reputation: 38183

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/

Upvotes: 4

Related Questions