Write multiple strings on the same id [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
Let's say I have the input of 'Fred'.
How can I print it so that it looks like this?
Character List:
F
r
e
d
And that it is all being written to a paragraph element in html with the id = 'msg2'
So far all that I can get it to write is either F or d
Apologies, forgot to include code
function start () {
var vName = document.getElementById('custname').value;
var vLength = processString(vName);
document.getElementById('msg1').innerHTML = vName;
document.getElementById('msg2').innerHTML = vLength;
}
function processString (pString) {
for (i = 0; i < pString.length; i++) {
t = i + 1
var vReturnName = ('Character list: <br />' + (pString.substring(i, t)))
}
return (vReturnName);
}


Split the string and use forEach to loop over the array then create new element and just put it in the DOM:
let str = "FRED";
str.split('').forEach(s => {
let p = document.createElement('p');
p.textContent = s;
document.body.appendChild(p);
})
p{border-bottom:solid 1px #c8c8c8;}


Your code has few issues:
var vReturnName = inside loop will always have last value as you are overriding it. Move declaration outside loop and the use vReturnName += to append
(pString.substring(i, t)) This will give you single character but you are not adding <br/> after it and so you will have no line-breaks. Also you can use string.charAt instead of it.
for (i = 0; Any variable defined without var|let|const becomes global.
function start() {
var vName = document.getElementById('custname').value;
var vLength = processString(vName);
document.getElementById('msg1').innerHTML = vName;
document.getElementById('msg2').innerHTML = vLength;
}
function processString(pString) {
var vReturnName = 'Character list: <br />'
for (i = 0; i < pString.length; i++) {
t = i + 1
vReturnName += (pString.substring(i, t) + "<br/>")
}
return (vReturnName);
}
<input type="text" id="custname" />
<button onclick="start()">Process String</button>
<div id="msg1"></div>
<div id="msg2"></div>
Alternate solution:
function start() {
var vName = document.getElementById('custname').value;
var vLength = processString(vName);
document.getElementById('msg1').innerHTML = vName;
document.getElementById('msg2').innerHTML = vLength;
}
function processString(pString) {
var vReturnName = wrapInP('Character list:')
for (var i = 0; i < pString.length; i++) {
vReturnName += wrapInP(pString.charAt(i))
}
return vReturnName;
}
function wrapInP(str){
return "<p>" + str + "</p>"
}
<input type="text" id="custname" />
<button onclick="start()">Process String</button>
<div id="msg1"></div>
<div id="msg2"></div>
References:
Is it sometimes bad to use <BR />?
string.charAt(x) or string[x]?


Use String#split to get array of each character.
Use Array#join to get the string concatenated with <br><br>
var name = "Fred";
var newName = name.split('').join('<br><br>');
document.getElementById('msg2').innerHTML = newName;
<div id='msg2'></div>


You have to split up the text and append it to the div like so:
var string = 'Fred';
var characters = string.split('');
for(var i=0; i< characters.length; i++)
{
$('#msg2').append(characters[i]+'<br/>');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = 'msg2'></div>
If using Pure JS:
var string = 'Fred';
var characters = string.split('');
for(var i=0; i< characters.length; i++)
{
document.getElementById('msg2').innerHTML+=characters[i]+'<br/>';
}
<div id = 'msg2'></div>

Related

Javascript CreateElement(br)

I am trying to create a score keeper display.
I want to keep track of the score using html and javascript. I have everything figured out I think but I can't figure out why the line doesn't break here.
Relevant code:
var br = document.createElement("br");
var nes = document.createTextNode("---------");
scorechart.appendChild(br);
scorechart.appendChild(nc);
if(tot) {
scorechart.appendChild(br);
scorechart.appendChild(nes);
scorechart.appendChild(br);
scorechart.appendChild(tot);
}
(For a full view: https://hastebin.com/osuduluvaj.js)
It breaks for everything but the "------" part: https://media.discordapp.net/attachments/240883852350980096/497957073481629696/sAAAAASUVORK5CYII.png
(I cant upload images yet as a new member)
Thank you :)

document.createElement() creates a single element, which you can only append to the DOM once. If you want to reuse the <br> element you created, you need to clone it and you can insert the cloned copy into the DOM. See: Node.cloneNode().
var score = [];
var scoreadd_button = document.querySelector('#scoreadd-button');
var scoreadd_input = document.querySelector('#scoreadd-input');
let sc1 = 0;
let sc2 = 0;
var scorechart = document.querySelector('.scores');
function totalScores() {
var i;
var sum = 0;
for (i = 0; i < score.length; i++) {
sum += score[i];
}
return sum;
}
function newScore(amm) {
score.push(amm);
if (!score[1]) {
var nc = document.createTextNode(amm)
} else {
var nc = document.createTextNode(" + " + amm);
}
if (sc1 == 0) {
sc1 = amm;
} else {
sc2 = amm;
}
if (sc2 != 0) {
var tot = document.createTextNode("= " + totalScores());
sc1 = amm;
sc2 = 0;
}
var br = document.createElement("br");
var nes = document.createTextNode("---------");
scorechart.appendChild(nc);
if (tot) {
scorechart.appendChild(br.cloneNode(true));
scorechart.appendChild(nes);
scorechart.appendChild(br.cloneNode(true));
scorechart.appendChild(tot);
}
}
scoreadd_button.addEventListener('click', function() {
var amm = scoreadd_input.value;
newScore(parseInt(amm, 10));
});
<button id="scoreadd-button">button</button>
<input type="text" id="scoreadd-input" />
<div class="scores"></div>

Okay so I fixed the issue by instead of using a variable just creating the element in the statement.
var nes = document.createTextNode("---------");
scorechart.appendChild(document.createElement("br"));
scorechart.appendChild(nc);
if(tot) {
scorechart.appendChild(document.createElement("br"));
scorechart.appendChild(nes);
scorechart.appendChild(document.createElement("br"));
scorechart.appendChild(tot);
}
Thank you :)

You just need to defined unique variables for each new created element on javascript, otherwise they will counted as one.
This code should works
var scorechart = document.querySelector('.scores');
var br = document.createElement("br");
var br2 = document.createElement("br");
var nes = document.createTextNode("---------");
scorechart.appendChild(br);
scorechart.appendChild(nes);
scorechart.appendChild(br2);
<span class="scores">
text before
</span>
after text

How to manipulate the characters written in a div to work with them afterwards using javascript

function doGetWord(){
var word = F.gword.value;
var wLength = word.length;
for(var i = 0; i < wLength; i++){
document.getElementById("dword").innerHTML += "_ "
}
}
This is a function that will write _ in a div in html, and what I want is to change them if the user types the corresponding input, for example if the first letter is supposed to be "a" then it would change the first _ to "a".
This is what I got so far:
function doGuessWord(){
dummy = F.t.value
if(dummy.length > 1){
dummy = ""
F.t.value = ""
}
for(var x = 0; x < wLength; x++){
if (substr(x, wLength) == dummy ) {
document.getElementById("dword").innerHTML += "_ "
}
else{
document.getElementById("dword").innerHTML += "dummy "
}
}
}
Could you help me out with this one?
Thanks in Advance!!

Something like this?
https://jsfiddle.net/9z66968a/3/
You will have to adapt it a bit. But you should be able to take the parseText function and pass it the params you need to return the text to insert where ever you want

There you go. I believe this is what you wanted. Feel free if you don't understand something
https://jsfiddle.net/vhsf8gpp/2/
var dashArr = [];
var dummyWord = document.getElementById('dummy');
var input = document.querySelector('input');
var counter = 0;
for(let i= 0; i<10;i++)
{
dashArr.push('_');
}
function WriteContent()
{
dummyWord.textContent = dashArr.map(d=>d).join(''); // This gets rid of the ',' inbetween the dashes
}
WriteContent();
//var charArr = [];
document.querySelector('input').addEventListener('keyup',function(){
var inputString = input.value;
dashArr[counter] = inputString.charAt(inputString.length - 1);
WriteContent();
counter++;
})
I used this post for reference.

Javascript array return "a"?

I wrote this piece with expectancy to store name and score in each and every array element.
Expected output:
var students = [
['David', 80],
['Dane', 77],
['Dick', 88],
['Donald', 95],
['Dean', 68]
];
However, I stumble upon assigning the second value in an array element... In codepen.io, the value returned is "a".
HTML:
name: <input type="text" id="namebox"><br><br>
score: <input type="text" id="scorebox"><br><br>
<input type="button" value="Add" onclick="addStudent()">
<input type="button" value="Display" onclick="displayArray()">
Javascript:
var x = 0;
var students = [];
function addStudent(){
students[x] = document.getElementById("namebox").value;
students[x][1] = document.getElementById("scorebox").value;
alert(students[x] + " added");
x++;
document.getElementById("namebox").value = "";
document.getElementById("scorebox").value = "";
document.getElementById("namebox").focus();
document.getElementById("scorebox").focus();
}
function displayArray(){
var e = "<hr>";
for (y = 0; y < students.length; y++)
{
e += students[y] + students[y][1] + "<br>";
}
document.getElementById("result").innerHTML = e;
}

as suggested by #Y.C. if you add students[x][0] = document.getElementById("namebox").value; your code will work. I wanna propose just a minor modification though so that your json array keeps its "pattern". Enclose document.getElementById("scorebox").value in parseInt() so you get the score as a number. In other words just write parseInt(document.getElementById("scorebox").value);
UPDATE
since my previous suggestion only works if you predefine the array I editted the code so now this should work.
instead of assigning the value to each cell I used push() function so now the addStudent method looks like this:
function addStudent(){
students.push(document.getElementById("namebox").value, parseInt(document.getElementById("scorebox").value));
alert(students[x] + " added");
x++;
document.getElementById("namebox").value = "".focus();
document.getElementById("scorebox").value = "".focus();
document.getElementById("namebox").focus();
document.getElementById("scorebox").focus();
}
UPDATE #2
my last update was only for addStudent to work since I thought this was the problem. So now this whole thing has to work by following the steps below:
on your html add a div with the id result because it seems that you forgot
<div id="result"></div>
on your Javascript just copy and paste the following
var x = 0;
var students = [];
function addStudent(){
students.push([document.getElementById("namebox").value, parseInt(document.getElementById("scorebox").value)]);
alert(students[x] + " added");
x++;
document.getElementById("namebox").value = "".focus();
document.getElementById("scorebox").value = "".focus();
document.getElementById("namebox").focus();
document.getElementById("scorebox").focus();
}
function displayArray(){
var e = "<hr>";
for (y = 0; y < students.length; y++)
{
e += students[y][0] + " " + students[y][1] + "<br>";
}
document.getElementById("result").innerHTML = e;
}
Notice that I have changed the addStudent function a bit just to add every student as a seperate array consisted of his/her name and his/her score.

do something like this
function addStudent(){
var studentArray = [],
tempArray = [],
index= 0;
tempArray[0] = document.getElementById("namebox").value; // David
tempArray[1] = document.getElementById("scorebox").value; //80
// this will insert array into main array.
studentArray.push(tempArray); // [['David', 80]]
// rest of your code
return studentArray;
}

How to get rid of all double commas

No this isn't a duplicate because all of the answers are different in other posts.
Does anyone know how to get replace something specific in a string? for example I'm trying to get rid of ALL commas that area together. Keep single commas but get rid of two only
For example:
w,h,o,,w,h,a,t,w,h,e,n,w,h,e,r,e,,t,h,e,n,,c,a,n,,b,u,t,,
I want to get rid of all instances where the double commas appear. Something kind of like:
var example = text.replace(/,,/g,' '); /*Space where ' ' is*/
If you understand what I mean. The next step is:
var text.replace(/,/g,'');
Thank you!
Code:
<html>
<head>
<script>
function decrypt() {
var input = document.getElementById("input").value;
var x = input.split(",");
var txtDisp="";
for(var i = 0; i < x.length; i++) {
if(x[i].type = "text") {
crack = 94-(x[i]-32)+32;
toTxt = String.fromCharCode(this, crack);
txtDisp = txtDisp+","+toTxt;
prep = txtDisp.replace(/,,/g,"");
}
document.getElementById("prompt").innerHTML=prep;
}
}
</script>
</head>
<body>
<textarea rows='4' cols='100' style='resize:none;' id='input'></textarea>
<br>
<input type='button' value='execute' onclick='decrypt()' />
<p id='prompt'>
</p>
</body>
</html>
P.s. this code is already posted somewhere else where I asked a question.

Why don't you do:
var text = "61,59,44,47,43,43, ,39,54,37, ,37,47,41,44, ,59,61,48, ,53,48,42,47, ,42,54,57,53,44, ,47,56,42,57,48, ,47,56,56, ,43,61,53,58, ,47,41,44, ,42,39,61,43, ,43,53,48,59,57, ,42,54,57,44,57, ,61,48,58, ,39,47,41,50,58";
example = text.split(",,").join("").split(", ,").join("");
the result is:
"w,h,ow,h,a,t,w,h,e,n,w,h,e,r,et,h,e,nc,a,nb,u,t"
I myself also tried to do it like:
example = text.replace(/,,/g,'').replace(/, ,/g,'');
the result was:
"w,h,ow,h,a,t,w,h,e,n,w,h,e,r,et,h,e,nc,a,nb,u,t"
I changed your code like this:
function decrypt() {
var val = document.getElementById("input").value;
var x = val.split(",");
var txtDisp = "";
for (var i = 0; i < x.length; i++) {
if (!isNaN(parseInt(x[i]))) {
var num = parseInt(x[i]);
crack = 94 - (num - 32) + 32;
toTxt = String.fromCharCode(this, crack);
txtDisp = txtDisp + "," + toTxt;
prep = txtDisp.replace(/,,/g, "").replace(/, ,/g, "");
}
document.getElementById("prompt").innerHTML = prep;
}
}
and it works. check this DEMO out.

Try this:
function decrypt() {
var input = document.getElementById("input").value;
var x = input.split(",");
var txtDisp = "";
for (var i = 0; i < x.length; i++) {
if (x[i] !== ' ') {
crack = 94 - (x[i] - 32) + 32;
toTxt = String.fromCharCode(this, crack);
txtDisp += "," + toTxt;
} else {
txtDisp += " ";
}
}
document.getElementById("prompt").innerHTML = txtDisp.replace(/,/g, "");
}

find { or } inside an element and wrap them with span

<div id = "board>
<div>{abc</div>
<div>def</div>
<div>ghi}</div>
</div>
I've already done this by span-wrapping all of the char first before comparing if it is { or }. But that is too slow, i need to reverse the procedure, is it possible to get the char position relative to the parent div?
Intended Output is
<div id = "board>
<div><span>{</span>abc</div>
<div>def</div>
<div>ghi<span>}</span></div>
</div>
how about using contains() and replace()?

You want to use Regular Expressions:
var x = '<div id = "board>' +
'<div>{abc</div>' +
'<div>def</div>' +
'<div>ghi}</div>' +
'</div>'; // or... get element by id 'board'
var rgx1 = /{/;
var rgx2 = /}/;
var y = x.replace(rgx1, "<span>{</span>");
y = y.replace(rgx2, "<span>}</span>");
if you think you have more than 1 occurrence of { or }, you can add "g" to the regex's:
var rgx1 = /{/g;
var rgx2 = /}/g;

Assuming this is the markup:
<div id="board">
<div>{abc</div>
<div>def</div>
<div>ghi}<div>
</div>
And your intended output is:
<div id="board">
<span>abcdefghi</span>
</div>
You can do this using jQuery/javascript like this:
var textNodes = $("#board").find("div");
var text = "";
for(var i=0;i<textNodes.length;i++) {
text = text + textNodes[i].text();
$("#board").remove(textNodes[i]);
}
var spans = text.split("}");
var textToAppend = "";
for(i=0;i<spans.length - 1 ;i++)
textToAppend = textToAppend + "<span>"+spans[i].split("{")[1]+"</span>";
$("#board").append(textToAppend);
Is this the solution you are looking for?
Edit 1:
If you need just the position of lets say b as 2, and d as 4?
Here is the code.
var textNodes = $("#board").find("div");
var text = "";
for(var i=0;i<textNodes.length;i++) {
text = text + textNodes[i].text();
}
var codeBlocks = text.split("}");
var firstBlock = codeBlocks[0];
var getCharPosInBlock = function (character) {
if(character === "}") return firstBlock.length;
return firstBlock.indexOf(character);
}

To get the required result using javascript looping:
var textNodes = $("#board").find("div");
for(var i=0;i<textNodes.length;i++) {
var value = textNodes[i].text()
if(value.indexOf("{") > 0)
textNodes[i].text(value.replace("{", "<span>{</span>"));
if(value.indexOf("}") > 0)
textNodes[i].text(value.replace("{", "<span>}</span>"));
}

Categories