How to make a space when concatenating strings - javascript

I have written some code that works fine but I am trying to make a space between the strings.
The code I have is:
<html>
<head>
<title> Concatenating Strings </title>
</head>
<body>
<script type = "text/javascript">
var greetingString = "Hello";
var myName = prompt ("Please enter your name","");
var concatString;
document.write(greetingString + "" + myName + "<br>");
concatString = greetingString + "" + myName;
document.write(concatString);
</script>
</body>
</html>
At the moment the script shows HelloMichael, I am wanting it to show Hello Michael. Can someone please advise me on how I can do that?

To insert a space character, simply insert a space character. For example:
greetingString + " " + myName
There's no space in your current output, because "" doesn't have a space in it.

put a space between hello and michael like this:
concatString = greetingString + " " + myName; //notice the space in the string

concatString = greetingString + " " + myName;
Simply change your "" to " ", the second has a space in it.

Related

javascript syntax string operators

help me out guys, i dont seem to know why the error is popping up. (i started learning javacript and i'm testing out how a string operator looks like)
<html>
<head><title>Head</title></head>
<body></body>
<script>
var age=27;
var info = "my name is Daniel, i am " +age + " years old " + 10;
console.log(info);
</script>
</html>
Uncaught SyntaxError: expected expression, got '<' debugger eval code:1
add script inside this BODY tag, and You can code like this
<html>
<head><title>Head</title></head>
<body>
<script>
var age=27;
// var info = "my name is Daniel, i am " +age + " years old " + 10;
var info = `my name is Daniel, i am ${age} years old 10`;
console.log(info);
</script>
</body>
</html>
The error is a JS error, not an HTML. If you put everything in JS(including HTML too) you probably get this error.
Either create two seperate files(.JS and .HTML) and put reference of .js in HTML
Put everything in HTML.
1. Two Files(JS and HTML)
var age = 27;
var info = "my name is Daniel, i am " + age + " years old " + 10;
console.log(info);
<html>
<head>
<title>Head</title>
</head>
<body></body>
</html>
2. Single HTML file
<html>
<head>
<title>Head</title>
</head>
<body></body>
<script>
var age = 27;
var info = "my name is Daniel, i am " + age + " years old " + 10;
console.log(info);
</script>
</html>

How to put quotes around a getElementById quote + string?

I have been working on this assignment where I have to make a prompt in which the visitor puts types in a string (or just any sentence for this matter) and afterwards the typed text needs to be shown on the page itself alongside with an indication in what line the first spacebar is implemented.
The problem however is that i need to put this in quote signs and since I am using a "+ script" in my Code, I cannot put it inside quotes.
Here is the code I am using:
<body>
<p id="Result"> </p>
<p id="First Spacebar"></p>
<script>
let string = prompt("Put text here");
const text = string;
document.getElementById('Result').innerHTML = "You said: " + string
document.getElementById('First Spacebar').innerHTML = "The first spacebar bevindt can be found in line: " + string.indexOf((" "));
</script>
</body>
Everything is working like it should, but i can't seem to get the " signs on each end of the string in the webpage version.
You can use template strings
<body>
<p id="Result"> </p>
<p id="First Spacebar"></p>
<script>
let string = prompt("Put text here");
const text = string;
document.getElementById('Result').innerHTML = `You said: "${string}"`
document.getElementById('First Spacebar').innerHTML = "The first spacebar bevindt can be found in line: " + string.indexOf((" "));
</script>
</body>
You can either escape the " that are meant to be displayed ("..\""), or , you can enclose your strings in single quotes ' and freely use double quotes " inside it:
let string = prompt("Put text here");
const text = string;
document.getElementById('Result').innerHTML = 'You said: "' + string + '"';
document.getElementById('First Spacebar').innerHTML = "The first spacebar bevindt can be found in line: " + string.indexOf((" "));
<p id="Result"></p>
<p id="First Spacebar"></p>
With ES6 template literals you can do it like this:
`You said: "${string}"`
Old style, you can leverage the fact that you can use either " or ' as outer quotation marks:
'You said: "' + string + '"'
Here are 2 ways:
document.getElementById('Result').innerHTML = 'You said: "' + string + '"'
(this uses both kinds of quotation marks so one can be used inside strings)
document.getElementById('Result').innerHTML = "You said: \"" + string + "\""
(this uses the escape character, '`', to indicate quotation marks that should be used as normal characters instead of surrounding strings)
You can use javascript escape codes. You can find an easy conversion table for these escape codes here.
The javascript escape code for " is \u0022.
A full script example:
<body>
<p id="Result"> </p>
<p id="First Spacebar"></p>
<script>
let string = prompt("Put text here");
const text = string;
document.getElementById('Result').innerHTML = "You said: \u0022" + string + "\u0022";
document.getElementById('First Spacebar').innerHTML = "The first spacebar bevindt can be found in line: " + string.indexOf((" "));
</script>
</body>

Why is the text element not being changed when I try with a function

<html>
<head>
<title>functionTesting</title>
</head>
<body>
<p id = "test" >test</p>
<script type = "text/javascript" >
function change(string){
//return string + ": Modified"
document:getElementById("test").innerHTML = string + ": Modified"
}
change("1234")
</script>
</body>
</html>
the test is never changed to "1234: Modified. It seems to stay as "test" unless I get the element outside the function then change it.
This line:
document:getElementById("test").innerHTML = string + ": Modified";
Should be:
document.getElementById("test").innerHTML = string + ": Modified";
You have a syntax error. Change:
document:getElementById
To:
document.getElementById
(colon to a period)

jQuery Replace character and symbol in string in each div , comma by € and € by nothing

so here is the scenario:
I have a bunch of spans with a class of " price " like that : 12,99€
I needed to split the cents after the coma so I could style it with css -> that's done , cents got its own class " cents "
Now I'm trying to replace the coma "," by the € euro symbol, and remove the € symbol at the end 'replace it with nothing, empty)
I hope it makes sense, here is an example...:
How it is now: 12,99€
and
What I need: 12€99
My code right now:
<!-- the html part CANNOT BE MODIFIED -->
<span class="price">29,49€</span>
<script>
jQuery(".price").each(function() {
var newText = jQuery(this).text().split(",").join("</span>,<sup class='cents'>");
newText = "<span class='euros'>" + newText + "</sup>";
jQuery(this).html(newText);
});
// Tryed to replace euro symbol by nothing but doesn't work //
var value = jQuery(".cents").val()+"";
value.replace("€", "");
var val = jQuery(".cents").val();
</script>
I would definitely appreciate if someone could help me out here since I really want to learn how to achieve this. It doesn't look too complicated but can't make it work which is frustating.
$(".price").text( function(i, oldtext){
return oldtext.replace("€","").replace(",","€")
});
http://jsfiddle.net/8da54/9/
How about using the following instead:
$(".price").html(function(i, val) {
val = val.split(",");
return "<span class='euros'>" + val[0] + "</span>" + "€" +
"<sup class='cents'>" + val[1].replace("€", "") + "</sup>";
});
DEMO: http://jsfiddle.net/8da54/11/
You don't need to use replace, you can use slice or substr.
$(".price").html(function(i, oldVal) {
var value = oldVal.split(",");
return "<span class='euros'>" + value[0] + "€</span>" +
"<sup class='cents'>" + value[1].slice(0, -1) + "</sup>";
});
demo

Can someone tell me if they see this

I am having problems when I try to pull it up on my computer the page is blank. I am not understanding this. Like when you click on the file button on the internet and you click open file that file shows up blank. Can someone help me understand why it is doing that. Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Week 10</title>
<script type="text/javascript">
/ *<![CDATA[ */
Var name;
firstName = "Valerie";
lastName ="Shipbaugh";
var placeOfBirth;
name=FirstName +"";
name += lastName;
placeOfBirth ="Houston";
placeOfBirth +=",Texas";
nameArray = name.split("");
/*]]>*/
</script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
document.write("<p> My first name is : + nameArray[0]
+ "<br />");
document.write("My last name is: "+ nameArray[1]
+ "<br />");
*/
The brackets[] specifies alternate characters allowed in a patch pattern.
It uses metacharacters which are special characters that define the pattern matching rules ina regular experession.
*/
document.write("There are " + firstName.length
+ " characters in my first name" + " <br/>");
*/
This one called the length property.
This returns the number of characters in a string.
*/
document.write("I was born in " + placeOfBirth + " <br/>");
*/
With this string we are using concatenation operations.
*/
document.write("<p>My initials are: " + firstName.charAt(0) +
lastName.charAt(0) + "</p>");
*/
The last one return the character at the specific position in a text string
returns an empty string if the specified position is greater than the length of the string.
*/
//]]>
</script>
</body>
</html>
So where my comments are to explain what is going on is in the wrong place???
There is a more general way to solve this problem:
Take everything out of this file and
copy it into notepad.
Put just the
<html>and </html> into the file
Begin copying very small blocks into
the file one at a time, each time
reload the page
Soon you will see
one small block that causes the
failure, then you can assess that
small block.
Look at errors reported by the browser (tools->error console in firefox for example) it will hi-light errors such as you mismatched /**/ comments & the missing closing quote character from;
document.write("<p> My first name is : + nameArray[0]
Also js is case sensitive so its var not Var, which you should use to define all your variables such as firstname (which you incidentally later refer to as Firstname) etc.
Of course it won't work, the comment blocks aren't even right:
*/
The brackets[] specifies alternate characters allowed in a patch pattern.
It uses metacharacters which are special characters that define the pattern
matching rules ina regular experession.
*/
Should be:
/*
The brackets[] specifies alternate characters allowed in a patch pattern.
It uses metacharacters which are special characters that define the pattern
matching rules ina regular experession.
*/
Also, you really should avoid using document.write. In certain cases, that is what causes a blank page (if I remember correctly, when you use it after page load).
JavaScript is case sensitive - so in the first section of your scripts:
Var name; //var is with a lowecase "v"
firstName = "Valerie";
lastName ="Shipbaugh";
var placeOfBirth;
name=FirstName +""; //firstName was created with a lowecase "f"
Later you have this...
document.write("<p> My first name is : + nameArray[0]
+ "<br />");
You're missing a quote in there, should be
document.write(" My first name is : " + nameArray[0]
+ "");
And finally, comments open and close like this:
/* comment */
Not like this
*/ error */
Fixing these things will make the script run. However, it's not doing what I suspect you want. You are trying to split() the string containing the name, but there's nothing to split it on. You need to add a space between then and try this:
nameArray = name.split(" ");
You can see this working here:
http://jsfiddle.net/CM7fx/
Test in multiple browsers and make sure you have javascript enabled id' suggest first
The comments were wrong, the variable name are case sensitive. Here is a working version without comments, you can re-add those
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Week 10</title>
<script type="text/javascript">
var name;
var firstName = "Valerie";
var lastName ="Shipbaugh";
var placeOfBirth;
name= firstName + " " + lastName;
placeOfBirth ="Houston ,Texas";
var nameArray = name.split(" ");
</script>
</head>
<body>
<script type="text/javascript">
document.write("<p> My first name is : " + nameArray[0] + "<br />");
document.write("My last name is: " + nameArray[1] + "<br />");
document.write("There are " + firstName.length + " characters in my first name" + " <br/>");
document.write("I was born in " + placeOfBirth + " <br/>");
document.write("<p> My initials are: " + firstName.charAt(0) + lastName.charAt(0) + "</p>");
</script>
</body>
</html>

Categories