Capture a text from input and display on p class-CodePudding

i have an input:

<input  name="title" id="title" type="text" maxlength="60" placeholder="title" value="<?= htmlchars($Post->get("data.title")) ?>">

So i need to display this input here:

<a href="#"><p >HERE</p></a>

How i can do it?

CodePudding user response：

.append is not supported on Internet Explorer as said in the docs Here: https://developer.mozilla.org/en-US/docs/Web/API/Element/append#browser_compatibility

Here is the simplest version :

<input  name="title" id="title" type="text" maxlength="60" placeholder="title" onchange="myFunction()" value="" />


<a href="#"><p id="Here" >HERE</p></a>

<script>

function myFunction() {
  var x = document.getElementById("title").value;
  document.getElementById("Here").innerHTML = x;
}

</script>

CodePudding user response：

You can target an element by class name with getElementsByClassName or the more modern querySelector (to target the first found element matching the query) or querySelectorAll (to target all matched elements).

Here's an example using querySelector:

function updateLink (event) {
  document.querySelector('.button-link-story').innerHTML = event.target.value
}
document.querySelector('#title').addEventListener('input', updateLink, false)

<input  name="title" id="title" type="text" maxlength="60" placeholder="title" value="defaultValueFromPHP">
<a href="#"><p >HERE</p></a>

See also:

addEventListener
the input event (you can choose to listen to different events if you want, like keydown or change, for slightly different behaviour)
innerHTML

CodePudding user response：

Use the JS method Element.append()

// DOM Utility functions:

const EL = (sel , par) => (par || document).querySelector(sel); 


// Task:

EL(".button-link-story").append( EL("#title") );

but, make sure to have only one button-link-story in your page, or rather use an ID as well.