How to left blank spaces inline? - javascript

I'm trying to left several blank spaces in a table, but I'm not able to do it. But in the same table I'm able to do it when I don't use javascript.
For example, in this cell, I can left 4 blank spaces with
<td>
{props.tcs.tl_conv + " / " + props.tcs.tl_int}
{(props.lang == "es") ? String(props.tcs.tl_percentage).replace(".", ",") + "%" : props.tcs.tl_percentage + "%"}
</td>
But when previosuly I try to left 4 blank spaces with " ".repeat(4) or with " ".
<td>{
(props.lang == "es") ?
String(props.tcs.t2p_conv_pp).replace(".", ",") + " / " + String(props.tcs.t2p_int_pp).replace(".", ",") +
" ".repeat(4) + String(props.tcs.t2p_percentage).replace(".", ",") + "%"
:
props.tcs.t2p_conv_pp + " / " + props.tcs.t2p_int_pp + " ".repeat(4) + props.tcs.t2p_percentage + "%"
}
</td>
How can I left blank spaces in this last piece of code?

Can you use a template string? Template strings maintain their formatting.
`${props.tcs.t2p_conv_pp} / ${props.tcs.t2p_int_pp} ${props.tcs.t2p_percentage}%`
// spaces here ^^^^

Thanks to #Rylee I have found the solution. Finally, my piece of code is:
<td>{
(props.lang == "es") ?
<span style = {{whiteSpace: "pre"}}>
{String(props.tcs.t2p_conv_pp).replace(".", ",") + " / " + String(props.tcs.t2p_int_pp).replace(".", ",") +
" " + String(props.tcs.t2p_percentage).replace(".", ",") + "%"}
</span>
:
props.tcs.t2p_conv_pp + " / " + props.tcs.t2p_int_pp + " ".repeat(4) + props.tcs.t2p_percentage + "%"
}
</td>
And here is the result:

'\xa0' is no break space char, and if you add them in between you JS you should be able to get spaces without using the &nbsp.
For example
<td>{
(props.lang == "es") ?
String(props.tcs.t2p_conv_pp).replace(".", ",") + " / " +
String(props.tcs.t2p_int_pp).replace(".", ",") +
'\xa0\xa0\xa0\xa0' + String(props.tcs.t2p_percentage).replace(".", ",") + "%":
props.tcs.t2p_conv_pp + " / " + props.tcs.t2p_int_pp + " ".repeat(4) +
props.tcs.t2p_percentage + "%"
}
</td>
Not sure if this is what you were looking for, but I hope this helps.

Related

Why does </span> add a new array position entry?

I don't understand why my placement of the first /span (_S) in the defFD variable is creating a new position in the array. I want to set one color for the portion dayname[i] and another after the span variable ND. But when I put the /span (_S) after the dayname section (before ND) in that position it splits the dayname into array position [0] and the rest into pos [1]. Why?
The result of the above code looks like this for the Day forecast: defFD = ["Wednesday Jan 5-", "A foggy day with a high of 47º. Hum 47%. Winds ESE at 10mph. Prec 10% chance.] I need there to be a single long string at position [0] without being split after "Wednesday Jan 5". I've come at this from several angles. Need fellow pros to help.
// STYLING VARIABLES for EXTRA DATA
var DN = '<span style= color:' + ( (where == "day") ? font_color_night : font_color_day ) + '>'; //Day-Night Color Swap
var ND = '<span style= color:' + ( (where == "day") ? font_color_day : font_color_night ) + '>'; //Night-Day Color Swap
var _S = "</span>"; //remove styling
// BUILD WEATHER DATA
var defFD = [];
for (i=0; i < (ForecastDays)+1; i++) {
defFD[i] = DN + obj.dayname[i] + " " + Suffix(dates[i]) + "- " + _S
+ ND + convertTxtDay(obj.day_desc[i]) + ((obj.code[i] == 24 && obj.day_desc[i].indexOf("wind") == -1) ? " and windy " : " ")
+ "with a high of " + obj.high[i] + "°" + Unit + ". "
+ "Hum " + obj.day_humidity[i] + "%. "
+ "Winds " + obj.day_cardinal[i] + " at " + obj.day_speed[i] + windspeedunit + ". "
+ ((obj.pop[i] != 0) ? "Prec." + obj.pop[i]+ "% chance." : "") + _S + "<P>"
;
defFN[i] = DN + obj.dayname[i] + nighttext + "- " + _S
+ ND + convertTxtNight(obj.ndesc[i]) + ((obj.code[i] == 24 && obj.ndesc[i].indexOf("wind") == -1) ? " and windy " : " ")
+ "with a low of " + obj.low[i] + "°" + Unit + ". "
+ "Hum " + obj.nhum[i] + "%. "
+ "Winds " + obj.ncard[i] + " at " + obj.nspeed[i] + windspeedunit + ". "
+ ((obj.npop[i] != 0) ? "Prec." + obj.npop[i]+ "% chance." : "") + _S + "<P>"
;
if (DayOnly == false) { defForecast.push(defFD[i], defFN[i]); } //move day & night alternating into 1 array
else { defForecast.push(defFD[i]); }
} ```
It looks like you might be missing the quotation marks around your style attributes:
var DN = '<span style="color:' + ( (where == "day") ? font_color_night : font_color_day ) + '">';
var ND = '<span style="color:' + ( (where == "day") ? font_color_day : font_color_night ) + '">';
It seems like what solves my issue is to simply add the /span's both at the end and not the middle.. Though no idea why I can't add an /span in the middle of the variable declaration without it adding a new array position.
var DN = '<span style="color:' + ( (where == "day") ? font_color_night : font_color_day ) + '">';
var ND = '<span style="color:' + ( (where == "day") ? font_color_day : font_color_night ) + '">';
var _S = "</span>"; //remove styling
defFD[i] = DN + (other variables here) +
ND + (other variables here) +
_S + _S;

Dynamic printing with javascript - building a string with various conditional components

I need to get rid of the comma right after the input firstAuthorInitials.value.slice(0,1) only when it is empty.
In case when in the input firstAuthorInitials.value.slice(0,1) is something written the code works fine.
The code looks like:
if (edition.value == "none") {
div.innerHTML +=
firstAuthorSurname.value + ", " +
firstAuthorName.value.slice(0, 1) + "." +
firstAuthorInitials.value.slice(0,1) + "." + ", " +
year.value +
". <i>" + title.value + "</i>. " +
placeOfPublication.value + ": " +
publisher.value + ".";
}
Create an array, push things into it, then join. Use logic applied to each element to decide if you want to push it or not.
if (edition.value == "none") {
var stringComponents = [];
stringComponents.push(
firstAuthorSurname.value,
", ",
firstAuthorName.value.slice(0, 1),
"."
);
if (/* some kind of logic */) {
stringComponents.push(firstAuthorInitials.value.slice(0,1), "., ");
}
stringComponents.push(
year.value +
". <i>",
title.value,
"</i>. ",
placeOfPublication.value,
": ",
publisher.value,
"."
);
div.innerHTML += stringComponents.join("");
}

Posting from multiple dynamically created HTML textarea elements

Given the following snippet:
out.println("<form action=" + "./post" + " " + "method=" + "post" + " " + "id=" + "tweetForm" + ">");
for (int i = 1; i <= twParser.currentTweetIndex; i++) {
output = twParser.tweetArray[i] + newLine;
out.println("<p>");
out.println("<textarea" + " " + "name=text" + " " + "id=\"styled\"" + " " + "maxlength=140" + " " + "cols=" + "140" + " " + "rows=" + "1" + " " + "tag=" + "text_" + String.valueOf(i) + " " + "form=" + "tweetForm" + " " + "onfocus=\"setbg('#e5fff3');\" onblur=\"setbg('white')\"" + ">" + output + "</textarea>");
out.println("<span class=label-style-countdown" + " " + "id=" + "chars" + String.valueOf(i) + ">" + String.valueOf(140 - twParser.tweetArray[i].length()) + "</span> characters remaining");
out.println("<p>");
}
out.println("<input type=" + "submit" + " " + "name=" + "post" + " " + "value=" + "post" + " " + "style=\"float: left;\"" + "/>");
out.println("<button type=\"reset\" value=\"Reset\">Reset</button>"
...that creates HTML multiple textarea elements and posts them to a servlet. But since all the textareas have the same name, only the contents of the first textarea are posted.
Is there a way to post them all?
Thanks
To have multiple inputs from same name you can use name array like
<textarea name="text[]">You text here</textarea>
which will post all the values having same name as an array.
PS: This can be done with any input types expect radio buttons
On this line:
out.println("<textarea" + " " + "name=text" + " " ...
Append i to the name of the textarea, such that the names increase as text1, text2 etc.
out.println("<textarea" + " " + "name=text" + i.toString() + " " ...
Perform the same loop on the server when receiving the POST request to receive from each textarea.

How to use single quotation in string manipulation in javascript

As you can understand in the title, I want use single quotation in string manupulation. Here is my code:
headline += '<article><h5><a class="headline" onmouseover="headLineDetail(' + this.HeadCaption + ',' + this.ShortDescription + ',' + this.PicUrl + ',' + this.NewsId + ')" href="NewsDetail.aspx?nid=' + this.NewsId + '"' + '">' + this.HeadCaption + this.time + '</a></h5>';
I have to give string parameters of headLineDetail with quotation. But I append headline to a div as inner html. How can I use single quotation in this case.
You could use a \' to escape it.
Just escape using a \'
headline += '<article><h5><a class="headline" onmouseover="headLineDetail(\'' + this.HeadCaption + '\',\'' + this.ShortDescription + '\',\'' + this.PicUrl + '\',\'' + this.NewsId + '\')" href="NewsDetail.aspx?nid=' + this.NewsId + '"' + '">' + this.HeadCaption + this.time + '</a></h5>';

Javascript innerHTML not allowing onClick on javascript function

I am not sure why, but the following
href='javascript:"+ openextlink('http://www.ipetfindr.com/shop/product/' + item._id.$id);+"'
seems to run automatically without the user clicking.
document.getElementById("shop-items").innerHTML += "<div class='product " + cssclass + "'><div class='product-images-smaller'><span class='shop-large-image'><img src='" + item.pictures[0] + "'/></span></div><h1>" + item.name + "</h1><div class='prodtext'><b>Status:</b> " + item.status + "<br><b>Price:</b> $" + item.price + "<br><a id='shop_" + item._id.$id + "' href='javascript:"+ openextlink('http://www.ipetfindr.com/shop/product/' + item._id.$id);+"'><h3 id='dshop_" + item._id.$id + "' class='green_button'>Buy Now</h3></a></div></div>";
could anyone please tell me why.
href='javascript:"+ openextlink('http://www.ipetfindr.com/shop/product/'
I see a double quote , is it a typo, change to
href='javascript:'+ openextlink('http://www.ipetfindr.com/shop/product/'

Categories