I have this JS code:
function myPopUp()
{
var y;
var name=prompt("Please enter your name"," הכנס את שמך");
if (name!=null)
{
y= ' How are you today?';
document.getElementById("popup").innerHTML = y;
var x="";
var time=new Date().getHours();
if (time<20)
{
x="Have a nice day" + name + '!';
}
else
{
x=' Great evening '+ name +' ! ';
}
document.getElementById("demo").innerText = x ;
}
}
with this HTML code:
<body>
<button onclick="myPopUp()" >לחץ כאן</button>
<p id="demo"></p>
<p id="popup"></p>
</body>
My question: When someone write their name there is no space between the words? How do I put a space between words in JS?
Thank you.
Looks like you just need a space after "day," so try this:
x="Have a nice day " + name + '!';
In HTML, extra white space is collapsed to a single space (ASCII 32) character.
If you MUST force a space, use the html identity which is a non-breaking space.
Better yet, use CSS to put margins around your element and make the spacing visual.
Related
Say we have the following code:
<html>
<body>
<p id="income"></p>
</body>
<script>
var income = 95350.23
document.getElementById("income").innerHTML = 'Income <span style = "float:right;">' + income + '</span>'
</script>
</html>
How do we fix this code? I'm trying to make the contents inside the tag state: "Income" on the left and 95,350.23 on the far right.
Thank you!
You have syntax errors in your code, you forgot to concatenate income with the rest of the string with +.
var income = 95350.23;
document.getElementById("income").innerHTML = 'Income <span style = "float:right;">' + income + '</span>';
<p id="income"></p>
var income = 95;
document.getElementById("income").innerHTML = "Income " + "<span style =
"+"float:right;"+">"+income+"</span>"
change the initialization of income
Here I'm extending the answer from #julekgwa with the method toLocaleString, which prints out a number in local format. Please pay attention to the output (comma and point).
As I understand, this is a requirement in your question.
var income = 95350.23;
document.getElementById("income").innerHTML = 'Income' +
'<span style = "float:right;">' +
income.toLocaleString('en-US') +
'</span>';
<p id="income"></p>
So I have a blockquote:
<blockquote>
<p>We seek to innovate: not for the sake of doing something different, but doing something
better.</p>
</blockquote>
What I need to do is grab the first and last word from the string. Then I need to wrap <span class="firstWord"></span> around the first word and <span class="lastWord"></span> around the last word in the sentence.
FYI - The text will constantly change so the first and last word WILL NOT always be the same word.
Is there a way for me to do this?
Using jQuery first split the text into array, modify first and last element in array and then join array
$('blockquote p').html(function(_, existing) {
var words = existing.trim().split(' ');
words[0] = '<span class="firstword">' + words[0] + '</span>';
words[words.length - 1] = '<span class="lastword">' + words[words.length - 1] + '</span>';
return words.join(' ');
});
.firstword,
.lastword {
color: red;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<blockquote>
<p>We seek to innovate: not for the sake of doing something different, but doing something better.</p>
</blockquote>
With jQuery:
I jsfiddle:
var blockquote = $('p').text(), //get the text inside <p>
bkFirst = blockquote.split(" ", 1), //get first word
bkLast = blockquote.substring(blockquote.lastIndexOf(" ")+1), //get last word
bkRemL = blockquote.substring(0, blockquote.lastIndexOf(" ")), //remove last word from original string (blockquote)
bkMid = bkRemL.substr(bkRemL.indexOf(" ") + 1), //remove first word from bkRemL, to get all words but first and last.
first = '<span class="firstWord">'+bkFirst+'</span>', //append first word on the span
last = '<span class="lastWord">'+bkLast+'</span>'; //append last word on the span
$('p').html(first+' '+bkMid+' '+last); //join all of them.
.firstWord {
color: red;}
.lastWord {
color: blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>A simple sentence with few words</p>
You can also use regex - find the first and last word using regex and replace it with that word wrapped in a span - you can address the selected word with the $1 variable.
'We seek to innovate: not for the sake of doing something different, but doing something better.'
.replace(/^([\w\-]+)/,'<span class="firstWord">$1</span>')
.replace(/([^\s]+$)/,'<span class="lastWord">$1</span>');
You could use split() and replice like :
var my_text = $('blockquote p').text();
var words = my_text.split(" ");
var first_word = words[0];
var last_word = words[words.length-1];
my_text = my_text.replace(first_word,'<span class="firstword">' + first_word + '</span>');
my_text = my_text.replace(new RegExp("("+last_word+")$",'g'),'<span class="lastword">' + last_word + '</span>');
$('blockquote p').html(my_text);
.firstword{
color: red;
}
.lastword{
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<blockquote>
<p>We seek better. to innovate: not for the sake better. of doing something different, but doing something better.</p>
</blockquote>
I am using this code which essentially types text onto the screen. I am unsure how to add a new line to the string which is being displayed.
I have already tried \n for those posting their answers. This does NOT work. A new line is not started in my HTML
Code:
var myString = "public class MyResume implements Resume{" +
/*this is where I want the new line*/ "...." ;
var myArray = myString.split("");
var loopTimer;
function frameLooper() {
if(myArray.length > 0) {
document.getElementById("myTypingText").innerHTML += myArray.shift();
} else {
clearTimeout(loopTimer);
return false;
}
loopTimer = setTimeout('frameLooper()',70);
}
frameLooper();
<div id="myTypingText"></div>
You can also use <br>.Just like"your string.<br> new line"
Here's an overly simplistic approach with full code. Use a tilde ~ and then watch for it in your frameLooper to insert a like this:
<html>
<body>
<div id="myTypingText"></div>
<script>
var myString = 'public class MyResume implements Resume{~....' ;
var myArray = myString.split("");
var loopTimer;
function frameLooper() {
if(myArray.length > 0) {
var char = myArray.shift();
if (char === '~')
{ document.getElementById("myTypingText").innerHTML += '<br/>'; }
else
{ document.getElementById("myTypingText").innerHTML += char; }
} else {
clearTimeout(loopTimer);
return false;
}
loopTimer = setTimeout('frameLooper()',70);
}
frameLooper();
</script>
</body>
</html>
Simply adding <br> to myString doesn't work because you're inserting each character at one time. When a character gets added with innerHTML, JavaScript encodes it:
$('element').innerHTML += "<";
> "string<"
If you did this for each character in <br>, you'd end up with
>"string<br<"
You need some way to tell your script to add the entire element when you reach a "break character". You could use an uncommon character like a pipe | or you could add a method which looks ahead to make sure that the next few characters don't spell out <br>.
To add string to a new line, you need the \n in your string. For example:
var string = 'This is the first line \nThis is the second line'
console.log(string)
This would output
This is the first line
This is the second line
Why don't you just append ul>li or p to your text, something like this:
document.getElementById("myTypingText").innerHTML += "<p>" + myArray.shift() "</p>";
or
document.getElementById("myTypingText").innerHTML += "<li>" + myArray.shift() "</li>";
with:
<ul id="myTypingText"></ul>
I am just beginning with JavaScript and what I am trying to achieve now is to add bold style to a variable result. The code that I am refering to is the following:
if(isNumeric(n)) {
document.write("The square root of " + n + " is " + answer);
}
else {
alert('This is not a number!');
}
I want to make the variable answer to appear in bold and the result to look like this:
Example: The square root of 4 is 2
Thank you all in advance!
It's just a matter of adding some HTML ?
if(isNumeric(n)) {
document.write("The square root of " + n + " is <strong>" + answer + "</strong>");
} else {
alert('This is not a number!');
}
This is fine for testing, but in production you wouldn't really use document.write, and preferably you'd use an external stylesheet and a wrapper element to make parts of the text bold.
<textarea name="test" id="text">
text
area
one one
two
break above
last
</textarea>
<span id="getvalues">get values</span>
$("#getvalues").click(function(){
})
How can i get all values from this textarea from each line to javascript array?
This should:
ignore whitespace - trim
ignore white break
Next i would like make:
$.each(textareavalues, function(index, value) {
console.log('#' + value + '#');
});
This should show me:
#text#
#area#
#one one#
#two#
#break above#
#last#
LIVE EXAMPLE: http://jsfiddle.net/BW8Z2/1/
When you say "ignore white space - trim", you mean "ignore leading and trailing white space on a line, but keep internal white space"? And "ignore white break" means "ignore lines with just white space"?
Something like this:
$("#getvalues").click(function(){
var lines = $("#text").val()
.replace(/\n\s*\n/g,"\n")
.replace(/^\s+|\s+$/gm,"")
.split(/\n/);
$.each(lines, function(i, val) {
console.log("#" + val + "#");
});
})
$("#getvalues").click(function(){
var $textareavalues = $("#text").val();
var x = $textareavalues.split('\n');
$.each(x, function(index, value) {
var text = $.trim(value);
if(text !== "")
console.log('#' + text + '#');
});
});
This will get you started:
var textareavalues = $('textarea').val().split('\n');
you can find how to trim strings and how to exclude empty items in an array in JavaScript from other questions on StackOverflow.