i cant seem to get this code to work i’ve been trying at it for hours i'm trying to make a formatting system for html markup and later js and css once i can get this working the desired outcome here to to have a list of items in the var l string detect in the contenteditable <p>tag but cant get it to give me any outcome same issue when applying a filter to replace words in a string with </tag> i'm not sure if this is a syntax issue or just something i'm missing but i cant for the life of me find the error in my code any help is appreciated
<html>
<style>
.form {
color: green;
background: black;
}
</style>
<body>
<button onclick="register()">format</button>
<p id="demo" contenteditable>tags to format- <head> <body> <html> <span></p>
<script>
function register() {
let text = document.getElementById("demo").innerHTML;
var l = ["head","body","html","span"];
for(let i = 0; i < l.length; i++) {
setTimeout(function() {
document.getElementById("demo").innerHTML =
text.replace("<"+ l[i] +">","<span class='form'><"+ l[i] +"></span>");
},500);
}
}
</script>
</body>
</html>
You were overriding the innerHTML each time. Only change the innerHTML once.
function register() {
let text = document.getElementById("demo").innerHTML;
var l = ["head","body","html","span"];
for(let i = 0; i < l.length; i++) {
text =
text.replace("<"+ l[i] +">","<span class='form'><"+ l[i] +"></span>");
}
document.getElementById("demo").innerHTML = text;
}
.form {
color: green;
background: black;
}
<button onclick="register()">format</button>
<p id="demo" contenteditable>tags to format- <head> <body> <html> <span></p>
Related
I'm a rookie. I try this example to test code that when click on each p ,the section text will replace by "yeah"
When click first p, first section is replaced
When click 2nd p, 2nd section is replaced ...
Code like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>p{text-align: center;}</style>
</head>
<body>
<p class="test">hello</p>
<p class="test">how</p>
<p class="test">are</p>
<p class="test">you</p>
<p class="test">today</p>
<p class="test">sir</p>
<section>good</section>
<section>great</section>
<section>excellent</section>
<section>well</section>
<section>best</section>
<section>better</section>
<script>
var x = document.getElementsByClassName("test")
var y = document.getElementsByTagName("section")
for(i=0;i<y.length;i++){
y[i].setAttribute("class","linktest")
}
var z = document.getElementsByClassName("linktest")
function place(a){
z[a-1].innerHTML="yeah"
}
for(i=0;i<x.length;i++){
x[i].addEventListener("click", function(){
place(i+1)})
}
</script>
</body>
</html>
how i wrong with for loop code of addEventListener
I try to write long code like this
x[0].addEventListener("click",function(){place(1)})
x[1].addEventListener("click",function(){place(2)})
x[2].addEventListener("click",function(){place(3)})
x[3].addEventListener("click",function(){place(4)})
x[4].addEventListener("click",function(){place(5)})
x[5].addEventListener("click",function(){place(6)})
And it worked but i want to short code because real work has mor than 100 items
Help plz
#Chaska's answer works fine but since you mentioned that there will be over 100 items it's important to avoid adding event listeners for each element for better performance. Instead wrap all the p tags in a div and add a single event listener to the div tag. Here is a slightly modified code.
var x = document.getElementsByClassName("test");
var y = document.getElementsByTagName("section");
for (i = 0; i < y.length; i++) {
//assuming equal no. of elements in x and y
y[i].setAttribute("class", "linktest");
x[i].setAttribute('data-index', i);
}
var z = document.getElementsByClassName("linktest");
function place(a) {
z[a].innerHTML = "yeah";
}
var testGroup = document.getElementById('test-group');
testGroup.addEventListener('click', function() {
place(parseInt(event.target.getAttribute('data-index')));
})
<div id="test-group">
<p class="test">hello</p>
<p class="test">how</p>
<p class="test">are</p>
<p class="test">you</p>
<p class="test">today</p>
<p class="test">sir</p>
</div>
<section>good</section>
<section>great</section>
<section>excellent</section>
<section>well</section>
<section>best</section>
<section>better</section>
You are calling place() function out of the for loop. So the value of i will always be 6.
Try this way to assign the index to each element first and pass it to the place() function.
var x = document.getElementsByClassName("test");
var y = document.getElementsByTagName("section");
for (i = 0; i < y.length; i++) {
y[i].setAttribute("class", "linktest");
}
var z = document.getElementsByClassName("linktest");
function place(a) {
z[a].innerHTML = "yeah";
}
for (i = 0; i < x.length; i++) {
x[i].setAttribute('data-index', i);
x[i].addEventListener("click", function() {
place(parseInt(this.getAttribute('data-index')));
})
}
<p class="test">hello</p>
<p class="test">how</p>
<p class="test">are</p>
<p class="test">you</p>
<p class="test">today</p>
<p class="test">sir</p>
<section>good</section>
<section>great</section>
<section>excellent</section>
<section>well</section>
<section>best</section>
<section>better</section>
I am trying to figure out a way to count words that are placed in multiple paragraph blocks in javascript. Right now I have a button that is connected to a function and that function is linked to an ID in the paragraph. Here is my code
function processText(elements) {
var count = 0;
for (var i = 0; i < elements.length; i++) {
count += elements[i].textContent.split(/\s/).length;
}
return count;
}
var wordsInParagraphs = processText(document.getElementsByTagName("data"));
<!DOCTYPE html>
<html>
<head>
<meta name="title" content="The Cask of Amontillado--Edgar Allan Poe (1809-1849)">
</head>
<body>
<p><button 1="processText(elements);">Process</button></p>
<p id="data"></p>
</body>
Is this what you're looking for? You just need to call the function on click and grab all the elements you want to count, you have the rest there (I'm using split instead of regex).
function processText() {
var elements = document.querySelectorAll(".data");
var count = 0;
for (var i = 0; i < elements.length; i++) {
count += elements[i].textContent.split(" ").length;
}
console.log(count)
}
<!DOCTYPE html>
<html>
<head>
<meta name="title" content="The Cask of Amontillado--Edgar Allan Poe (1809-1849)">
</head>
<body>
<p><button onclick="processText();">Process</button></p>
<p class="data">text in paragraph one</p>
<p class="data">text in paragraph two</p>
</body>
The markup has some problems, for example, 1="processText(elements);" probably you meant onClick="processText(elements);", however, you're passing a param called elements. Further, you have a tag with id="data" and you're trying to look for tag name those elements.
A better approach is using the function addEventListener for a better logic and you should mark those paragraphs using a class name class="data". Finally, for splitting by spaces use this regex /\s+/
function processText(elements) {
var count = 0;
for (var i = 0; i < elements.length; i++) {
count += elements[i].textContent.split(/\s+/).length;
}
return count;
}
document.getElementById('myButton').addEventListener('click', function() {
var wordsInParagraphs = processText(document.getElementsByClassName("data"));
document.getElementById('total').textContent = wordsInParagraphs;
});
<p><button id='myButton'>Process</button></p>
<p class="data">Ele from Stack</p>
<p class="data">Ele from Venezuela</p>
<p id='total'></p>
I am trying to make new lines (in this single line of text) as you can see in my index.html file, but it is not working, any help? (\n is where the new line should start, has not worked either.
index.html:
<html>
<head>
<title>test</title>
</head>
<body bgcolor="black">
<font color="green">
<p id="terminal"></p>
<script>
var text = "this is a test\nthis should be on the next line";
var count = 0;
var speed = 50;
function Type() {
if(count < text.length) {
document.getElementById("terminal").innerHTML += text.charAt(count);
count ++;
setTimeout(Type, speed);
}
}
Type();
</script>
If you don't want to use <br /> you can easily use the <pre> tag. It's actually easier to use <pre> since you don't have to insert the <br /> at the right location in the DOM.
Taken from the docs.
The HTML pre element represents preformatted text which is to be presented exactly as written in the HTML file.
var text = "this is a test\nthis should be on the next line";
var count = 0;
var speed = 50;
function Type() {
if(count < text.length) {
document.getElementById("terminal").innerHTML += text.charAt(count);
count ++;
setTimeout(Type, speed);
}
}
Type();
<html>
<head>
<title>test</title>
</head>
<body bgcolor="black">
<font color="green" />
<pre id="terminal"></pre>
</body>
</html>
Substitute the new line \n with break <br>
This is probably a silly question but why do I lose all the formatting when the function test() starts? What should I change in my code? I would really appreciate your help!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
background: #E6E6FA;
font-family: book antiqua;
}
h1, h2 {
color: grey;
}
</style>
</head>
<h3>Title</h3>
<body bgcolor="#E6E6FA">
<input type="text" id="userInput"></input>
<button onclick="test()">Submit</button>
<p id="Demo"></p>
<p id="Beg"></p>
<p id="Fin"></p>
<script>
function test()
{
var nam= document.getElementById("userInput").value;
var l = nam.length;
var pocz = nam.slice(0,1);
var kon = nam.slice(-1);
document.getElementById("Demo").innerHTML = document.write("Your secret code: " + l + pocz + kon);
var one = nam.slice(-1)
if (one == "a") {
document.write(nam.slice(0,-1) + "bbb");
} else {
document.write(nam + "ccc");
}
}
</script>
</body>
</html>
If document.write is called after the DOM loaded, it replaces the document. Also you are using document.write incorrectly, it doesn't return anything. Just omit it and it will work fine.
document.getElementById("Demo").innerHTML = "Your secret code: " + l + pocz + kon;
For the other uses, do the same thing and assign the value to an element via innerHTML.
Please read the documentation before you use an unfamiliar function.
Never use document.write. Ever. Just don't use it. It is completely antiquated.
Felix Kling's answer will work for the first part, since you are assigning html to an element directly. but the later calls are adding more content to the document, not replacing content, so you must append new content to the document, or make another placeholder (like demo). here is how to do it with appending new content:
function test()
{
var nam= document.getElementById("userInput").value;
var l = nam.length;
var pocz = nam.slice(0,1);
var kon = nam.slice(-1);
document.getElementById("Demo").innerHTML = "Your secret code: " + l + pocz + kon;
var one = nam.slice(-1);
if (document.getElementsByClassName("spantext").length===0)
{
var text=document.createElement("span");
text.setAttribute("class","spantext");
document.getElementsByTagName("body")[0].appendChild(text);
}
else {
var text=document.getElementsByClassName("spantext")[0];
}
if (one == "a") {
text.innerHTML=nam.slice(0,-1) + "bbb";
} else {
text.innerHTML=nam + "ccc";
}
}
fiddle
I'm really newbie at Web Development and I'm trying to change the text of some inputs, with Javascript. Here is a example of what my code have to do
<!DOCTYPE html>
<html>
<body>
<p>Click the button to replace "R$" with "" in the field below:</p>
<input id="demo" value="R$ 1223,43"></input>
<input id="demo1" value="R$ 134523,67"></input>
<input id="demo2" value="R$ 12453,41"></input>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x=document.getElementByTagName("input")
for(var i = 0; i < x.length; i++) {
var str=x[i].innerHTML;
var n=str.replace(",",".");
var n1 = n.replace("R$ ","");
document.getElementById("demo").innerHTML=n1;
}
}
</script>
</body>
</html>
So, I want to withdraw the "R$" and replace "," to "." for some math operations. And I have to do this with all inputs in my code.
You were nearly there, replacing a few things to make it look similar to this:
function myFunction() {
var x = document.getElementsByTagName("input"); // ; was missing and you used getElementByTagName instead of getElementsByTagName
for (var i = 0; i < x.length; i++) {
var str = x[i].value; // use .value
var n = str.replace(",", ".");
var n1 = n.replace("R$ ", "");
//document.getElementById("demo").innerHTML=n1; // use x[i] again instead
x[i].value = n1; // and again use .value
}
}
DEMO - Running updated code
These are the needed steps - at least step 1 through 3
moved the script to the head where it belongs
changed getElementByTagName to getElementsByTagName, plural
get and change x[i].value
chained the replace
DEMO
<!DOCTYPE html>
<html>
<head>
<title>Replace example</title>
<script>
function myFunction() {
var x=document.getElementsByTagName("input"); // plural
for(var i = 0; i < x.length; i++) {
var str=x[i].value;
x[i].value=str.replace(",",".").replace("R$ ","");
}
}
</script>
</head>
<body>
<p>Click the button to replace "R$" with "" in the field below:</p>
<input id="demo" value="R$ 1223,43"></input>
<input id="demo1" value="R$ 134523,67"></input>
<input id="demo2" value="R$ 12453,41"></input>
<button onclick="myFunction()">Try it</button>
</body>
</html>
First of all, use .value instead of .innerHTML. .innerHTML referes to text within the opening and closing of the tag.
Secondly, correct the spellings at var x=document.getElementByTagName("input")
it should be getElementsByTagName
this function should do what you want:
function myFunction()
{
var eles=document.getElementsByTagName("input");
for(var i = 0; i < eles.length; i++)
{
if(eles[i].type != 'text') continue; // inputs that aren't of type text dont make sense here
var str = eles[i].value;
str=str.replace(",",".");
str=str.replace("R$ ","");
eles[i].value=str;
}
}