Summary
I'm currently working on a project where I have to have a textarea element with an id of editor that updates a div element with an id of preview with its value as the user types into it. Currently, the preview element only updates with the text once the user stops focusing on the editor element, however, I want it to update immediately as the user types. I know this would be easy to achieve in React but is there a way to do it in plain JavaScript? This is the code I have so far:
The Code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown Previewer</title>
</head>
<body>
<div id="content">
<textarea id="editor">
</textarea>
<div id="preview">
</div>
</div>
</body>
</html>
JAVASCRIPT
const preview = document.getElementById('preview');
const editor = document.getElementById('editor');
editor.addEventListener('change', (event) => {
console.log(event);
preview.textContent = event.target.value;
})
Any help appreciated.
Change the event to input instead of change. input is triggered every time the value of an element changes even while it still is in focus. change event on the other hand will be triggered when an element is changed and then loses focus.
Read more: https://html.com/attributes/textarea-onchange/#ixzz7AsNuUXNU
const preview = document.getElementById('preview');
const editor = document.getElementById('editor');
editor.addEventListener('input', (event) => {
console.log(event);
preview.textContent = event.target.value;
})
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown Previewer</title>
</head>
<body>
<div id="content">
<textarea id="editor">
</textarea>
<div id="preview">
</div>
</div>
</body>
</html>
this is working code,
You need to put your javascript after the html code, javascript is scripting language whaich means it executes line by line so if you put it before preview and editor element then you are trying to access them before there are initialized, and it wont work, when you put javascript code after html code then code will work as textarea element is already initialized and availbale to use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<title>Markdown Previewer</title>
</head>
<body>
<div id="content">
<textarea id="editor">
</textarea>
<div id="preview">
</div>
</div>
<script>
console.log('yes')
const preview = document.getElementById('preview');
const editor = document.getElementById('editor');
editor.addEventListener('change', (event) = > {
preview.textContent = event.target.value;
})
</script>
</body>
</html>
Related
I am looking to manipulate the DOM of a page and in one area I need to return the below:
<p class="styles_label__gDrbZ"><span>PHL</span><span>Review</span></p>
As
<p class="styles_label__gDrbZ"><span>PHL</span> <span>Review</span></p>
I cannot seem to work out how to do this - any help much appreciated
There are multiple ways to achieve this, two approaches which immediately I can think of is -
:nth-child() Selector
.insertAfter()
Below is the implmentation using the :nth-child(), selecting the first child which is the <span> tag within the <p> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("p span:nth-child(1)").append(" ");
});
</script>
</head>
<body>
<p class="styles_label__gDrbZ"><span>PHL</span><span>Review</span></p>
</body>
</html>
I am trying to read the value of an input text field entered in the Arabic language using javascript.
But as you can see in the screenshot it's not fetching the text in the same way I typed.
The number '123' which is on the right side of the input field is jumping to the left side when I try to read the entered input field value using js code.
Please help me to solve this issue.
Below is the code that I am using:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html:lang(ar){
direction: rtl;
}
</style>
</head>
<body>
<input type="text" dir="rtl" name="" id="textbox">
</body>
</html>
Thanks in advance :)
If you output the Arabic RTL text in the console, it will be shown in the LRT direction. If you output the text in another Html field with RTL set for that field it will display correctly
Here is an example. Output the Arabic text into another field will be displayed correctly.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html:lang(ar){direction: rtl;}
</style>
</head>
<body>
<input type="text" id="inputText" oninput="outputIt()">
<div id="outputText"></div>
</body>
<script>
function outputIt() {
document.getElementById("outputText").innerHTML = document.getElementById("inputText").value;
}
</script>
</html>
I have to print "Hello, Mars", but something is wrong. I've tried to add paragraph.appendChild(text) too but it not works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const body = document.getElementById("body")
const paragraph = document.createElement("p")
const text = document.createTextNode("Hello, Mars")
body.appendChild(paragraph)
</script>
</body>
</html>
Two things here:
Firstly, you never add text to the created paragraph, which would be done by adding this:
paragraph.appendChild(text);
Secondly, using getElementById() you are selecting an item that would have id="body", not the <body> element on your page. You can get the body using document.body as follows:
const body = document.body;
I haven't used jQuery since a long time, and I have forget a lot of things in it.
I tried to change the element text when an element clicked but it didn't work, I don't know why.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>practice test</h1>
<h1>practice test</h1>
<h1>practice test</h1>
<h1>practice test</h1>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$("h1").click(() => {
console.log("event trigered");
$(this).text("this element is clicked");
});
</script>
</body>
</html>
You can do something like this. where you send the event with the click and then get the target, that is clicked, and then you can edit the content of that with .text()
$("h1").click(event => {
const clickedElement = $(event.target);
console.log("event trigered");
clickedElement.text("this element is clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>practice test1</h1>
<h1>practice test2</h1>
<h1>practice test3</h1>
<h1>practice test4</h1>
Have you tried using html() function instead of text()?
Also, you can check this StackOverflow page, if you'll still have problems with it: How to change a text with jQuery
I am trying print my page automatically using jQuery.But problem is red dot circle appear.So how to remove them ?3
This is my html file look like
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
Hello From Other side
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
window.onload = function () {
window.print();
}
</script>
</body>
</html>
So i want to remove that red dot circle part like url name and title Name.
Please Try this from this link How to remove the URL from the printing page?
<style media="print">
#page {
size: auto;
margin: 0;
}
</style>
its a browser default behaviour. you should unchecked the header checkbox