JavaScript: transform a text between <p> tags into a new one also between <p> tags (output)

Question

I'm trying to operate a transformation onLoad from a <p> text </p> in order to create a <p> new modified text </p> (the point is I don't wanna use textareas ) in simple javascript.

Here is what I've been trying to do (but it seems to work only with values coming from textareas ) :

<script>
<?php include("js/roman.js"); ?>
function afficher(form2) {
    var testin = document.form2.TextToModify.value;
                 document.form2.NewModifiedText.value=hangul_to_roman(testin);
}
</script>

<div>
    <p name="TextToModify" value="input" onLoad="afficher(form2)">

        TEXT    

    </p>

    <p name="NewModifiedText" value="output">  

        <!-- NEW MODIFIED TEXT   -->

    </p>
</div>

Does anyone know how to get the first text between the "p" tags in order to proceed to the transformation ?

Thank you in advance !

Answer 1

Some notes:

• Better avoid inline event handlers.
• p elements can't have name nor value attributes.
• document.form2.TextToModify is a non standard way of accessing a form element. The standard way would be document.forms.form2.elements.TextToModify , but it won't work because p elements aren't listed elements .

 function hangul_to_roman(str){ return str; } function afficher() { document.getElementById('NewModifiedText').innerHTML = hangul_to_roman( document.getElementById('TextToModify').innerHTML ); } afficher(); // This must run after loading the DOM 

 <div> <p id="TextToModify"> TEXT </p> <p id="NewModifiedText"> <!-- NEW MODIFIED TEXT --> </p> </div> 

The hangul_to_roman is only included here in order to make the code snippet runnable.

Note afficher() must be called after your elements have been loaded, eg in a script placed just before closing </body> , or in an event listener of DOMContentLoaded or load events.