Reverse the characters added in text field
Topics related to client-side programming language.
Post questions and answers about JavaScript, Ajax, or jQuery codes and scripts.
-
Marius
- Posts: 107
Reverse the characters added in text field
I have the following html and JavaScript code. An input text box and a button.
Code: Select all
<input type='text' id='backwards-input'>
<button id='backwards-button'>Button</button>
<p id='backwards-container'></p>
<script>
const bkinp = document.getElementById('backwards-input');
const bkbtn = document.getElementById('backwards-button');
const revtxt = document.getElementById('backwards-container');
</script>
How can I make, when I press the button, the text that is added in the input box be displayed into the <p> element, but in reverse order?
For example, if in the input is "abc 123", the text "321 cba" should be added into the <p> element from my code.
Admin
Try use and study the following code:
Code: Select all
<input type='text' id='backwards-input'>
<button id='backwards-button'>Button</button>
<p id='backwards-container'></p>
<script>
function backwards(inp, rev) {
const backwardsInput = inp.value.split('').reverse().join('');
rev.textContent = backwardsInput;
}
const bkinp = document.getElementById('backwards-input');
const bkbtn = document.getElementById('backwards-button');
const revtxt = document.getElementById('backwards-container');
bkbtn.addEventListener('click', ()=>{ backwards(bkinp, revtxt)});
</script>
Demo
Similar Topics
-
Show with animation the content added with JavaScript
JavaScript - jQuery - Ajax
First post
The idea is that when i click on a button, old content gets replaced by new HTML content added with javascript.
I want that new content to appear...
Last post
To trigger a CSS transition, change the CSS state after you inserted the HTML. You can do this by changing a class (on the container or an inserted...
-
Link inline with the text
HTML - CSS
First post
Hi members I'm looking for the script for a link <href> to another URL.
I give part of my text and the link as it is now on my page:
and...
Last post
Hello,
In your case, put both the text and the link inside the <p> tag.
<p>and there where useful, supplemented with comments, tips...
-
How to get text from javascript alert box
JavaScript - jQuery - Ajax
First post
Good evening (dutch-time) I have a javascript what can copy text to a clip-board + it has a button to show the item-list in a alert-box.
But can`t...
Last post
Thanks for the support I tried already things with history + f_print
also studied those a little before I asked coursesweb but I shall
when my head...
-
Javascript add different text to each minute of hour
JavaScript - jQuery - Ajax
First post
Hello Coursesweb I`m unknown with javascripts ????
I would like to add function minutes to this script
on each minute an diferent text added to...
Last post
Hello,
Try the following script.
<div id='addtxtmin' style='color:#00d; font-size:20px; font-weight:700'></div>
<script>
const...
-
Hide element if data contains specific text
HTML - CSS
First post
Is there a possibility to hide HTML elements if the 'data-' attribute contains a specific piece of text?
For example: Hide the Divs that it's data...
Last post
You can do this with either CSS or Javascript.
CSS:
/* with specified elements */
div {
display: none;
}
/* or global */
{
display: none;...