Changing a paragraph via a text field using javascript

Question

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?

You would have to attach an event listener to the button which triggers a function that takes the value of the text field and inserts it into the paragraph, and no, javascript is the easiest way. You should post code that you have already tried if you want more help — fiction
– fiction, Commented Apr 17, 2014 at 16:16

Alex W · Accepted Answer · 2014-04-17 16:24:28Z

5

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/

answered Apr 17, 2014 at 16:24

Alex W

38.5k13 gold badges115 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BenMorel · Accepted Answer · 2014-06-27 14:28:11Z

0

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

edited Jun 27, 2014 at 14:28

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Apr 17, 2014 at 16:19

technopeasant

7,96733 gold badges93 silver badges151 bronze badges

1 Comment

technopeasant Over a year ago

Worth noting that this will update the field live, while a user is typing, as opposed to on submit.

Collectives™ on Stack Overflow

Changing a paragraph via a text field using javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related