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>');
I am trying to create dynamic html from an api response. Whenever I get a two-word class name, I cannot get it to save both words as the string is ending when it see's the space. See below:
for(var i = 0; i<articles.posts.length; i++){
var cls = 'fa '+articles.posts[i].category;
var el = "<article><i class="+cls+"></i><h2> From the Archive </h2><h1> " + articles.posts[i].title + "</h1><h3> " + articles.posts[i].date + " </h3><p> " + articles.posts[i].blurb + "</p></article>"
$("#article-list").last().append(el);
}
For Instance if 'cls' is fa fa-space-shuttle, the class gets set as 'fa' not both 'fa fa-space-shuttle'. Any idea how to get around this using javascript?
Whenever I get a two-word class name
There are no two-word class names. What you have there is two classes.
var el = "<article><i class="+cls+"></i><h2> From the Archive </h2><h1> " + articles.posts[i].title + "</h1><h3> " + articles.posts[i].date + " </h3><p> " + articles.posts[i].blurb + "</p></article>"
Look closely at the quotes in that line of code. There aren't any around the class attribute. So, according to the HTML specification, the value ends at the first space. Add quotes around it:
var el = "<article><i class='"+cls+"'></i><h2> From the Archive </h2><h1> " + articles.posts[i].title + "</h1><h3> " + articles.posts[i].date + " </h3><p> " + articles.posts[i].blurb + "</p></article>"
// -------------------------^-------^
Example:
var cls = "fa fa-link";
var el = "<article><i class='"+cls+"'></i><h2> From the Archive </h2></article>"
document.body.insertAdjacentHTML("beforeend", el);
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
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.
For some reason the textarea i am appending to using jquery creates white space.
javascript
$(document).ready(function(){
var artistName = $("#artist-name").text();
var songName = $("#song-title").text();
var prepopulated_tweet = "#Myrfriends #RndomPerson \"you'll love this track\" #" + artistName + " - " + songName + " #Rock #Pop #Soul Krilex.******.co/rx11"
$("#tweet-message").append(prepopulated_tweet);
})
html
<textarea name="name" rows="4" cols="80" id="tweet-message"></textarea>
output
#Myrfriends #RndomPerson "you'll love this track" #Krilex -
Pieces - Red
#Rock #Pop #Soul Krilex.*****.co/rx11
any clues?
Content in #song-title element must have new lines.
Given:
<div id="song-title">
Pieces - Red
</div>
$("#song-title").text(); would return:
"
Pieces - Red
"
We have a JavaScript assignment that we have to do. We have to build a sentence generator. When I run this in Chrome, nothing happens when I click the buttons. When I check the Console Log, it says Uncaught ReferenceError: mySubject is not defined. I thought I defined it already in element1.onclick function?
This is my code so far:
<body>
<div id="container">
<div id="buttons">
<button id="btn1">Generate subject</button>
<input name="subject" type="text" id="subject"
/>
<button id="btn2">Generate verb</button>
<input name="verb" type="text" id="verb" />
<button id="btn3">Generate adjective</button>
<input name="adj" type="text" id="adj" />
<button id="btn4">Generate object</button>
<input name="object" type="text" id="object" />
</div>
<!--buttons closing div-->
<div>
<p id="output">asjkldhfahfjasf;d</p>
</div>
<!--output closing div-->
</div>
<!--container closing div-->
<script>
var subject = new Array("Mel Gibson", "Optimus-Prime", "The Cat-lady", "The student", "My Dentist");
var verb = new Array("licks", "pets", "hugs", "stabs", "eats");
var adj = new Array("fat", "ugly", "delicious", "redundant", "hopeless");
var object = new Array("cat", "bacon-strip", "dog-house", "bigmac", "hobo");
var element1 = document.getElementById("btn1");
var element2 = document.getElementById("btn2");
var element3 = document.getElementById("btn3");
var element4 = document.getElementById("btn4");
element1.onclick = function() {
mySubject = subject[Math.random() * subject.length]
};
element2.onclick = function() {
myVerb = verb[Math.random() * verb.length]
};
element3.onclick = function() {
myAdj = adj[Math.random() * adj.length]
};
element4.onclick = function() {
myObject = object[Math.random() * object.length]
};
document.getElementById("output").innerHTML = mySubject + myVerb + " the" + myAdj + myObject + ".";
</script>
</body>
I'm starting to get so lost and have no idea what to do and this is only one of the many problems I have.
EDIT:
So I got some help with my Javascript and everything is now working except for the output. I want it to output into the output div, but it's not outputting anything. This is my code now:
<h1>The Amazing Fantastical Sentence Generator!</h1>
<h4>Have hours of fun with your imaginary friends!</h4>
</div><!--title closing div-->
<div id="buttons">
<button id="btn1">Generate subject</button>
<input name="subject" type="text" id="insubject"/>
<button id="btn2">Generate verb</button>
<input name="verb" type="text" id="verb"/>
<button id="btn3">Generate adjective</button>
<input name="adj" type="text" id="adj"/>
<button id="btn4">Generate object</button>
<input name="object" type="text" id="object"/>
<div >
<p id="output"></p>
</div><!--output closing div-->
</div><!--container closing div-->
<script>
var subject=new Array("Mel Gibson", "Optimus-Prime", "The Cat-lady", "The student", "My Dentist");
var verb=new Array("licks", "pets", "hugs", "stabs", "eats");
var adj=new Array("fat", "ugly", "delicious", "redundant", "hopeless");
var object=new Array("cat", "bacon-strip", "dog-house", "bigmac", "hobo");
var element1=document.getElementById("btn1");
var element2=document.getElementById("btn2");
var element3=document.getElementById("btn3");
var element4=document.getElementById("btn4");
element1.onclick=function() {document.getElementById('insubject').value=subject[Math.floor(Math.random()*(subject.length))];}
element2.onclick=function(){document.getElementById('verb').value=verb[Math.floor(Math.random()*(verb.length))];}
element3.onclick=function(){document.getElementById('adj').value=adj[Math.floor(Math.random()*(adj.length))];}
element4.onclick=function(){document.getElementById('object').value=object[Math.floor(Math.random()*(object.length))];}
document.getElementById("output").innerHTML= document.getElementById("insubject").value + document.getElementById("verb").value + " the" + document.getElementById("adj").value + document.getElementById("object").value + ".";
</script>
</body>
</html>
Variables declared inside functions are local to those functions, which means that you can't use them outside of those functions. Try declaring your variables as global outside of the functions.
you should define the mySubject variable along with myVerb and myAdj as follows :
var mySubject;
var myVerb;
var myAdj;
You are defining it inside a function. Declare them outside the function, then try assigning them the value inside.
When I check the Console Log, it says Uncaught ReferenceError:
mySubject is not defined. I thought I defined it already in
element1.onclick function?
JavaScript scope is function scope. Any variable declared within a function only can be accessed by that function and any nested functions but not the outer ones.
If you want to access mySubject outside the function too you need to declare it where you have verb, subject, etc.. delcared.
In addition, even though you still have the issue that your document.getElementById command is using mySubject before the click event is assigning it but that is a different issue I suppose.
So I figured out how to fix this.
After having edited my code again, all the buttons were working, but they were not outputting correctly into the output div. So I declared all the Math.Random equations that were being run on my arrays, so that they all had a default answer. Also I created a default output that would display in the output div.
var subStr = subject[Math.floor(Math.random()*(subject.length))];
var verbStr = verb[Math.floor(Math.random()*(verb.length))];
var adjStr = adj[Math.floor(Math.random()*(adj.length))];
var objStr = object[Math.floor(Math.random()*(object.length))];
document.getElementById("output").innerHTML= subStr + " " + verbStr + " the " + adjStr + " " + objStr + " .";
Then I changed my onclick events.
element1.onclick=function(){
subStr = subject[Math.floor(Math.random()*(subject.length))];
document.getElementById('insubject').value=subStr;
document.getElementById("output").innerHTML= subStr + " " + verbStr + " the " + adjStr + " " + objStr + " .";
}
element2.onclick=function(){
verbStr = verb[Math.floor(Math.random()*(verb.length))];
document.getElementById('verb').value=verbStr;
document.getElementById("output").innerHTML= subStr + " " + verbStr + " the " + adjStr + " " + objStr + " .";
}
element3.onclick=function(){
adjStr= adj[Math.floor(Math.random()*(adj.length))];
document.getElementById('adj').value=adjStr;
document.getElementById("output").innerHTML= subStr + " " + verbStr + " the " + adjStr + " " + objStr + " .";
}
element4.onclick=function(){
objStr= object[Math.floor(Math.random()*(object.length))];
document.getElementById('object').value=objStr;
document.getElementById("output").innerHTML= subStr + " " + verbStr + " the " + adjStr + " " + objStr + " .";
}
Now each Math.random was being calculated again, followed by it being inputted into the specific text field, and then outputting into the output div.