So I have the following in my page which is a textarea with some text in it:
and what i want to do now is to replace the BR in the text with newline \r such that i would get the following displayed in the textarea:
Hi
I
Am
Jake
Here's what I tried so far:
console.log(document.getElementById("sample").value);
document.getElementById("sample").value = document.getElementById("sample").value.replace("<BR>","\n");
html, body {
height: 100%;
}
textarea {
resize: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
</div>
<script src="test.js"></script>
</body>
</html>
However, it doesn't seem to be displaying properly. Would appreciate some help on this.
Use replaceAll() instead of replace(). The replace function will replace only the first match, replaceAll() will replace all the occurrences in the given string.
I also suggest escaped strings in the replace parameters. Add backslash (\) in your < > characters.
console.log(document.getElementById("sample").value);
document.getElementById("sample").value = document.getElementById("sample").value.replaceAll("\<BR\>","\n");
html, body {
height: 100%;
}
textarea {
resize: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
</div>
<script src="test.js"></script>
</body>
</html>
JavaScript's replace function only replaces the first instance. You can, however, use regex with the /g flag. I replaced "<BR>" with /<BR>/g, and it works (you just have to scroll). If you're interested, there is also String.prototype.replaceAll, but that doesn't have that good browser support.
console.log(document.getElementById("sample").value);
document.getElementById("sample").value = document.getElementById("sample").value.replace(/<BR>/g,"\n");
html, body {
height: 100%;
}
textarea {
resize: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
</div>
<script src="test.js"></script>
</body>
</html>
Use .value.split("<BR>").join("\n") instead of .value.replace("<BR>", "\n")
document.getElementById("sample").value = document.getElementById("sample").value.split("<BR>").join("\n");
html, body {
height: 100%;
}
textarea {
resize: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
</div>
<script src="test.js"></script>
</body>
</html>
Here is my solution:
document.getElementById("sample").value = document.getElementById("sample").value.replace(/\<BR\>/g,"\n").trim();
Related
I have an HTML file linked to a script. A button defined in the HTML has an onclick function 'incrementLabel()' but the function in the script throws the warning:
'incrementLabel' is declared but its value is never read.
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
<!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">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
</body>
</html>
I can't find any solutions to the problem other than writing the function in a in HTML. Any help would be much appreciated.
Thanks!
<!DOCTYPE HTML>
<script>
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
</script>
<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">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
</body>
</html>
This works perfectly fine. Check if you are importing your JS script correctly.
You can put the javascript code into a before the closing tag .
HTML:
<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">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
<script>
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
</script>
</body>
Some of online tools like https://playcode.io don't recognise your code but I have tested in vscode and works fine.
Maybe have to use other online tool or can test if you have imported the code well with a console.log("Works fine") into your javascript file.
Sorry for my english.
hello my code isn't working idk why i tried to make textarea char counter that only shows the chachter not maxiumum
here is the java script
let text = document.querySelector('#text');
let number = text.value.length;
let count = document.querySelector('#count');
text.addEventListener("input", updateCount());
function updateCount(){
count.value + number
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
<script src="main.js"></script>
</body>
</html>
In your text.addEventListener("input", updateCount()); assignment you did not assign the function updateCount to the input event of the selected element but instead you executed it once and assigned the non-existent return value of the function call to the event.
And in the function itself you will need to put (=assign) the calculated count somewhere too:
let text = document.querySelector('#text');
let count = document.querySelector('#count');
text.addEventListener("input", updateCount);
function updateCount(ev){
count.textContent=ev.target.value.length;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
<script src="main.js"></script>
</body>
</html>
ev.target.value.length gets the current length of the <textarea> element and count.textContent= assigns it to the target <span>.
A better way is by subscribing to the keyup event and getting the value from the scope using this keyword
function characterCount() {
document.getElementById('text').onkeyup = function () {
document.getElementById('count').innerHTML = this.value.length;
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz" onchange="characterCount()"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
</body>
</html>
This question already has answers here:
Attaching click event to a JQuery object not yet added to the DOM [duplicate]
(10 answers)
Closed last year.
I want to switch once a button is pressed. This is the code. It would not be for something so simple, but I can't even get this to work.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Test</title>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-section page-1 active"><h1>I'm page 1</h1></div>
<div class="page-section page-2"><h1>I'm page 2</h1></div>
<button class="link link-1">Page 1 link</button>
<button class="link link-2">Page 2 link</button>
</body>
</html>
CSS
.page-section {
width: 200px;
height: 200px;
display: none;
}
.page-1 {
background-color: blue;
}
.page-2 {
background-color: red;
}
.page-section.active {
display: block;
}
JS
function pageActivator(page) {
$('.page-section').removeClass('active');
page.addClass('active');
}
$('.link').click(function() {
var pageNum = parseInt($(this).attr('class').match(/\d+/g)[0]);
pageActivator($('.page-' + pageNum));
});
This is the codepen, on the website it works, while locally it doesn't I have no idea why.
I really don't understand because the code is the same from the codepen, maybe I am missing something on the HTML file? Even if the .js file is correctly connected, I have verified it. And the CSS file too.
You use JQuery codes but you did not call JQuery library. Do the following:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Test</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
I need to make section with options in it going from 0 to 100 when the page is open, in html is simple just type it all out :D, but i think i can do this in java script but i am not quite sure how.
Here is my html and a little bit of js code:
function options() {
var section = document.getElementById("section");
for(var i = 0;i < 100;i++){
section.innerHTML = "<option value="i">"+i+"</option>";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section id="section" onload="options">
</section>
</body>
</html>
Here's How you can do it -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select id="mySelect" onload="options()"></select>
</html>
<script type="text/javascript">
var selectElem = document.getElementById("mySelect");
for (var i = 0; i < 100; i++){
var element = document.createElement("option");
element.innerText = i + 1;
selectElem.append(element);
}
</script>
Here's the working example
<section> tag doesn't support onload.
You can check w3schools onload event and MDN: onload, the tags support onload are: <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
So you can move onload="options()" to <body> then escape the double quotes and use <select> instead of <section> as the comments mentioned.
function options() {
var section = document.getElementById("section");
for(var i = 0;i < 100;i++){
section.innerHTML += "<option value=\"i\">"+i+"</option>";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="options()">
<select id="section">
</select>
</body>
</html>
$(function(){
$('#alias').keyup(function(){
$('#youtuber').html($('#alias').val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="width=device-width">
<title>Julius extension</title>
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
<style>
body{
width: 300px;
}
</style>
</head>
<body>
<h3>Find your YouTuber: <span id="youtuber"></span> </h3>
<input id="alias" placeholder="Search your youtuber"/>
</body>
</html>
I am trying to code a simple chrome extension. Right now I want that everything I write in the search bar of my template gets displayed above, after the "Find your YouTuber:" text.
However, for some reason that is not the case, I get the error message: popup.js:1 (anonymous function), whilst running the extension.
popuph.html :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="width=device-width">
<title>Julius extension</title>
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
<style>
body{
width: 300px;
}
</style>
</head>
<body>
<h3>Find your YouTuber: <span id="youtuber"></span> </h3>
<input id="alias" placeholder="Search your youtuber"/>
</body>
</html>
popup.js:
$(function () {
$('#alias').keyup(function () {
$('#youtuber').html($('#alias').val());
});
});