We Keep Coding

jQuery append implementation is breaking

So I have this code that I am trying to alter –
Original:
jQuery(document).ready(function() {
var name = '';
var firstLastName = '[[T6:[[E48:[[S334:fr-id]]-[[S334:px]]:cons.first_name]]]] [[T6:[[E48:[[S334:fr-id]]-[[S334:px]]:cons.last_name]]]]';
var screenname = '[[T6:[[S48:0:screenname]]]]';
if (screenname) {
name = screenname;
} else {
name = firstLastName;
}
var splitName = name.split('');
var nameCheck = splitName[splitName.length-1];
jQuery('#personal_page_header h2').html("Support " + name + "'s Fundraiser" );
});
someone wrote this up and are no longer here, and what I'm trying to do now is figure out how to instead of replace the existing text, add to it.
So right now what this code does is it replaces the h2 content with the constituents registered name, or screenname.
What I'm trying to do now is append to that so that it will say something like
<h2>
Welcome to my fundraiser
<br/>
"Support" + name + "'s Fundraiser"
</h2>
but unfortunately what I tried breaks the code and stops it from working.
what I tried to do is this:
jQuery('#personal_page_header h2').append('<span><br />"Support " + name + "'s Fundraiser"</span>' );
I've tried to do a variety of other things that gave the same unsuccessful result.
Any help would be really appreciated!
Thanks

This should work for you:
jQuery('#personal_page_header h2').append("<span><br/>Support " + name + "'s Fundraiser</span>");
You've just got your quotations a little out of place.

You need to concatenate your code correctly, so if you'd like to keep the " use ' to concatenate. Further you need to escape the ' inside the string with \:
jQuery('#personal_page_header h2')
.append('<span><br />"Support ' + name + '\'s Fundraiser"</span>');

How can I use the output of a JavaScript function as a string inside a HTML textarea box?

I have been creating a profile making program and I would like to use the output of this JS function as a simple string text inside the textarea box which the user can copy using the "Copy to Clipboard" button. Any ideas, please let me know ASAP. Here is my current code:
<!--HTML-->
<!--Button Code-->
<button onclick="copyprofile()">Copy to clipboard</button><br>
<!--Textarea Code-->
<textarea id="text" cols="60" rows="13">I want output of createProfile() to be here</textarea><br>
//Javascript
function createProfile(){
var fn,ln,a,fc,fs,ff,profile;
fn = prompt("Please enter your first name","Enter first name here");
ln = prompt("Please enter your last name","Enter last name here");
a = prompt ("Please enter your age","Enter age here");
fc = prompt("Please enter your favourite colour","Enter favourite color here");
fs = prompt("Please enter your favourite sport","Enter favourite sport here");
ff = prompt("Please enter your favourite food","Enter favourite food here");
profile = ("Name: " + fn + " " + ln + "<br>Age: " + a + "<br>Favourite colour: " + fc + "<br>Favourite sport: " + fs + "<br>Favourite food: " + ff);
return profile;
}
function copyProfile(){
var text = document.getElementById('text');
var range = document.createrange();
range.selectNode(text);
window.getSelection().addRange(range);
document.execCommand(copy);
}
If you have any thoughts or ideas on how to achieve this, please let me know

Being that you have already saved everything in a string assigned to profile, just reference the element you want to update and assign it as the value.
In javascript:
document.getElementById("text").value = profile;
And if you want the to keep the line breaks, you'll need to do something other than <br> as a textarea doesn't typically render HTML. I'd suggest doing a carriage return or line feed. \n
profile = ("Name: " + fn + " " + ln + "\nAge: " + a + "\nFavourite colour: " + fc + "\nFavourite sport: " + fs + "\nFavourite food: " + ff);;
Here is a JSFiddle with an example https://jsfiddle.net/x1w1t8ux/
Update
I took some time to look at the rest of your code as you said it still was not working as you expected. Your copyProfile function has a couple of errors. If you open up your developer console when trying to run these functions, you'll see the error messages:
Uncaught TypeError: document.createrange is not a function
You're line document.createrange() is not a function. You need to camel case it to be document.createRange().
After you fix that error, try to run the code again will display another error in the console:
Uncaught ReferenceError: copy is not defined
In this line document.execCommand(copy); you are referencing a variable called copy. That variable does not exist, nor is it what you're looking for. You are wanting to pass the string copy to the function execCommand. It should look like document.execCommand('copy'); (with quotes, as that's how you identify a string in JavaScript.
In your HTML, when you click on your Copy To Clipboard button <button onclick="copyProfile()">Copy to clipboard</button> it throws an error
Uncaught ReferenceError: copyprofile is not defined
You do not have a function called copyprofile, you have one called copyProfile. Function names are case sensitive. I would recommend sticking to a consistent naming convention (such as camel case)
Lastly, no where in your code are you calling the function createProfile(). So I created it as a second button in my testing.

I need some troubleshooting with my HTML/JavaScript code

I am trying to create code that when you press a button, it will change the value of a variable and replace some text.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="unitts">You have 0 unitts</p>
<script type="text/javascript">
var unitt = 0;
function unittIncrease() {
var unittPrev = unitt;
unitt++;
document.getElementById(unitts).innerHTML.replace("You have " + unittPrev.toString() + " unitts.", "You have " + unitt.toString() + " unitts.");
}
</script>
<button id="unittIncrease" onclick="unittIncrease();">Digitize Unitt</button>
</body>
</html>
When I press the button, nothing happens to the text.
I don't know why this does not work.
Please help me!
EDIT: I am only 11 years old,
please don't throw your wizard
code at me.
maybe you should remove your button system and add a while loop that
automatically add a unit but waits one second with a setInterval
function

I think you should write the js code like this
document.getElementById('unitts').innerHTML = "You have"....
Instead of:
document.getElementById(unitts).innerHTML.replace("...")

Your JavaScript should be (note the unitts wrapped in quotes and the full stop removed):
document.getElementById('unitts').innerHTML = "You have " + unitt + " unitts";
Instead of:
document.getElementById(unitts).innerHTML.replace("You have " + unittPrev.toString() + " unitts.", "You have " + unitt.toString() + " unitts.");
In the latter, it is looking for the non-existent variable unitts instead of the string 'unitts'. Also, you are looking for the text You have x unitts. which cannot be found because in your HTML, it is just You have x unitts without the full stop.
Edit
See this plnkr.

Apart from the issues that the other answer mentions, by calling .replace method on the .innerHTML property of the element, the content of it doesn't change. You should reset the property by using the returned value of the method call:
el.innerHTML = el.innerHTML.replace(...);
Also, as you are trying to increase a number, instead of replacing all the characters, you can just replace the numeric part:
var unitts = document.getElementById('unitts');
function unittIncrease() {
unitts.textContent = unitts.textContent.replace(/\d+/, function(n) {
return +n + 1;
});
}
https://jsfiddle.net/h6odbosg/

Autofill input text on Sharepoint 2007 using Jquery

im sure this is a simple question but can't understand why this isn't working. I simply want to set the current time automatically to an input field. I am using Jquery at the moment to accomplish the task. I know jquery works because if I do alert (time); it shows me the time as expected.
Just to add, I set the jquery script in a text then referenced into a Content Editor Webpart under the list.
Below is the HTML of my input generated by Sharepoint. I decided to target the title as its the only consisting attribute in there.
<input type="text" class="ms-long" title="Current time" id="ctl00_m_g_dd7a368d_cc10_4464_a245_c7fc87ae6650_ff2_1_ctl00_ctl00_TextField" maxlength="255" name="ctl00$m$g_dd7a368d_cc10_4464_a245_c7fc87ae6650$ff2_1$ctl00$ctl00$TextField">
Below is the Jquery script I am trying to run. A the moment this script does nothing to my input text box.
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var time = (dNow.getMonth()+1) + '/' + dNow.getDate() + '/' + dNow.getFullYear() + ' ' + dNow.getHours() + ':' + dNow.getMinutes();
$("input[Title='Current time']").val(time);
});
</script>
Any help would appreciated on this.

I tested your code and it works fine if you define the dNow first: tested on Chrome and Opera
jQuery(document).ready(function($) {
var dNow = new Date();
var time = (dNow.getMonth()+1) + '/' + dNow.getDate() + '/' + dNow.getFullYear() + ' ' + dNow.getHours() + ':' + dNow.getMinutes();
alert(time);
$("input[title='Current time']").val(time);
});
If that's not working for you, you have some other problem in your JavaScript, debug and check for other errors

underline part of innerHTML

I'm building a table that displays the dates of the next 10 days. I need to insert the day, date, month and year into the table. I'm using this JavaScript code for this:
document.getElementById(i).innerHTML = weekday + " " + date + " " + month + " " + year;
My problem:
I want to underline the month, but not the other values.
How can I fix this one? I already tried giving a CSS class along with the variable but I keep failing quite hard.
If more details or code is needed, please ask. This is my first time posting here and only javascripting for a month or so.

You do want to use a CSS class to give meaning to that portion of the element and style it. Wrap it in a <span> with the given class and then apply the styles through your style sheet.
document.getElementById(i).innerHTML = weekday + " "
+ date
+ " <span class='month'>" + month + "</span> "
+ year;
Style
.month { text-decoration: underline; }
Using a semantic class, rather than a specific tag or inline styles, allows you to easily change the style of this type of display on a global basis rather than having to update each individual place where the styling occurs.
EDIT: Obviously you know your application best, but I would avoid underlining except for links or where convention dictates (like some titles) that it should be used. It can be very confusing for a user since underlining in a browser typically conveys that something is a clickable link. That doesn't seem to be what you're going for here, but I could be wrong.

Not elegant solution, but just works:
document.getElementById(i).innerHTML = weekday + " " + date + " <span style='text-decoration: underline;'>" + month + "</span> " + year;

Why don't you just give it markup since innerHTML implies that you can put html there.
document.getElementById(i).innerHTML = weekday + " " + date + " <u>" + month + "</u>" + year;
I just used an underline tag :)

You can achieve this using the HTML <u> tag. For example:
document.getElementById(i).innerHTML = weekday + " " + date + " <u>" + month + "</u> " + year;
Here's an example using the above method > http://jsfiddle.net/vuS4B/
But it might be better for you to do this using a <span> element, and add a CSS class to the span. Something like this:
document.getElementById(i).innerHTML = weekday + " " + date + " <span class='underline'>" + month + "</span> " + year;
And the associated CSS:
span.underline { text-decoration: underline; }
Here's the jsFiddle > http://jsfiddle.net/vuS4B/1/