Develop Reference

madlibs generator webpage with javascript

I want to use only 1 input bar to cycle through different prompts asking the user to input nouns, verbs, adjectives, etc. I want it to cycle through every time the user presses the 'enter' key. And at the very end, I want the entire madlib paragraph to print out at the bottom with the stored user input values. I think using an array was correct in order to store the user input values.. I'm stuck. Am I doing this right??
full codepen with HTML and CSS here (to see my simple concept idea): https://codepen.io/stanimal93/pen/GRJGeEb
let prompt = document.getElementById('prompt');
let input = document.getElementById('userinput');
let madlib = document.getElementById('madlibparagraph');
input.addEventListener("keyup", submit(event));
input.addEventListener("keyup", resetInput);
input.addEventListener("keyup", changePrompt);
function submit(event) {
if (event.keyCode === 13) {
event.preventDefault();
}
}
function resetInput() {
input.value = "" // to clear the input
}
function changePrompt() {
let word = new Array();
word[0] = "a location: "
word[1] = "a living thing: "
word[2] = "a name: "
word[3] = "a kind of food: "
word[4] = "a noun: "
word[5] = "a verb: "
word[6] = "a color: "
word[7] = "a plural noun: "
word[8] = "a sound: "
for (i = 0; i < 10; i++) {
prompt.innerHTML = word[i];
word[i] = input.value
};
}
// var location = "a location: "
// var livingThing = "a living thing: "
// var name = "a name: "
// var food = "a kind of food: "
// var noun = "a noun: "
// var verb = "a verb: "
// var color = "a color: "
// var pluralNoun = "a plural noun: "
// var sound = "a sound: "
// let words = [location, livingThing, name, food, noun, verb, color, pluralNoun, sound]
let madib.innerHTML = "Once upon a time in " + _______ + ", there was a " + _______ + " named " + _________ + ". The world was stricken by coronavirus in the year 2020 and there was no " + ________ + " to eat anymore. " + ________ + " went outside to find " + _________ + " and realized everyone was " + ________ + ". There were " + ________ + " colored " + __________ + " and you could hear " + ___________ + " in the distance.";

Solved and finished it myself and it is bug free! I had trouble wrapping my head around using a for loop as opposed to an if statement during an eventListener keypress event, along with a fadein type of function. Feel free to play it! in this codepen: https://codepen.io/stanimal93/pen/GRJGeEb
$(document).ready(function() {
let prompt = document.getElementById('prompt');
let input = document.getElementById('userinput');
let madlib = document.getElementById('madlibparagraph');
function resetInput() {
input.value = '' // to clear the input
}
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
prompt.style.opacity = 0;
storeAnswer();
resetInput();
setTimeout(fadein, 500);
function fadein() {
prompt.style.opacity = 1;
changePrompt();
}
}
});
let word = new Array();
word[0] = "a living thing: "
word[1] = "a name: "
word[2] = "a kind of food: "
word[3] = "a noun: "
word[4] = "a verb: "
word[5] = "a color: "
word[6] = "a plural noun: "
word[7] = "a sound: "
word[8] = "Read your madlib below!"
var i = 0
function changePrompt() {
if (i < 9) {
console.log(i);
prompt.innerHTML = word[i];
console.log(answer);
i++
}
if (i === 9) {
madlib.innerHTML = "Once upon a time in " + answer[0].toUpperCase().bold() + ", there was a " + answer[1].toUpperCase().bold() + " named " + answer[2].toUpperCase().bold() + ". The world was stricken by coronavirus in the year 2020 and there was no " + answer[3].toUpperCase().bold() + " to eat anymore. " + answer[2].toUpperCase().bold() + " went outside to find " + answer[4].toUpperCase().bold() + " and realized everyone was " + answer[5].toUpperCase().bold() + ". There were " + answer[6].toUpperCase() + " colored " + answer[7].toUpperCase().bold() + " and you could hear " + answer[8].toUpperCase().bold() + " in the distance.";
}
}
function storeAnswer() {
for (var a = 0; a < 9; a++) {
answer[i] = input.value;
}
}
let answer = new Array();
answer[0] = ""
answer[1] = ""
answer[2] = ""
answer[3] = ""
answer[4] = ""
answer[5] = ""
answer[6] = ""
answer[7] = ""
answer[8] = ""
});

Why does "\n" create a new line even when told not to?

I am having a problem with "\n" creating a line even when it is told not to when copying. The fix is probably something simple that I am just not seeing for some reason. I would appreciate any input or coaching on this problem.
(Please only give me Javascript answers as I am not interested in jquery or other methods)
<script type="text/javascript">
if (pullDownResponseE == "")
{
}
else {
var pullDownValuesE = document.getElementById("taskOne");
var pullDownResponseE = pullDownValuesE.options[pullDownValuesE.selectedIndex].value;
stuffToCopy = stuffToCopy + "\n" + pullDownResponseE;
}
if (pullDownResponseF == "")
{
}
else{
var pullDownValuesF = document.getElementById("taskTwo");
var pullDownResponseF = pullDownValuesF.options[pullDownValuesF.selectedIndex].value;
stuffToCopy = stuffToCopy + "\n" + pullDownResponseF;
}
</script>
As you can see, pullDownResponseF and pullDownReponseE should do nothing if my dropdown value equals "" and this portion works for the most part, it doesn't execute any of the else code EXCEPT for the new line "\n" part.
Can anyone explain what is going wrong here?
EDIT: Having more code might help here. I'll only include the essential portions since it is so long.
<script type="text/javascript">
function copyNotesTemplate()
{
var stuffToCopy = document.getElementById('myForm').value;
if(stuffToCopy.length > 1)
{
var stuffToCopy = "PT meets criteria" + "\n" + document.getElementById('myForm').value;
}
if(document.getElementById('noPtCriteria').checked)
{
var stuffToCopy = document.getElementById('noPtCriteria').value;
}
if (pullDownResponsee == "")
{
}
else {
var pullDownValuese = document.getElementById("taskOne");
var pullDownResponsee = pullDownValuese.options[pullDownValuese.selectedIndex].value;
stuffToCopy = stuffToCopy + "\n" + pullDownResponsee;
}
if (pullDownResponsef == "")
{
}
else{
var pullDownValuesf = document.getElementById("taskTwo");
var pullDownResponsef = pullDownValuesf.options[pullDownValuesf.selectedIndex].value;
stuffToCopy = stuffToCopy + "\n" + pullDownResponsef;
}
if (pullDownResponseg == "")
{
}
else{
var pullDownValuesg = document.getElementById("taskThree");
var pullDownResponseg = pullDownValuesg.options[pullDownValuesg.selectedIndex].value;
stuffToCopy = stuffToCopy + "\n" + pullDownResponseg;
}
var tempValues = document.getElementById('whatUpdate').value
if(tempValues.length > 1)
{
var stuffToCopy = stuffToCopy + "Updated" + " " + document.getElementById('whatUpdate').value + " ";
}
else{
}
var tempValuess = document.getElementById('whatInfo').value
if(tempValuess.length > 1)
{
var stuffToCopy = stuffToCopy + "per" + " " + document.getElementById('whatInfo').value + "\n";
}
else{
}
var tempValue = document.getElementById('whatDSCRP').value
if(tempValue.length > 1)
{
var stuffToCopy = stuffToCopy + document.getElementById('whatDSCRP').value + " " + "dscrp on Collection tube and trf was resolved using" + " ";
}
else{
}
var tempValue = document.getElementById('resolveIT').value
if(tempValue.length > 1)
{
var stuffToCopy = stuffToCopy + document.getElementById('resolveIT').value + " ";
}
else{
}
var tempValue = document.getElementById('tubeCorrect').value
if(tempValue.length > 1)
{
var stuffToCopy = stuffToCopy + "trf was" + " " + document.getElementById('tubeCorrect').value;
}
else{
}
if(stuffToCopy.length > 1)
{
var stuffToCopy = stuffToCopy + "\n" + document.getElementById('moreNotes').value;
}
else{
}
if (pullDownResponsesu == "")
{
}
else{
var pullDownValuesu = document.getElementById("mod33Apply");
var pullDownResponsesu = pullDownValuesu.options[pullDownValuesu.selectedIndex].value;
stuffToCopy = stuffToCopy + "\n" + pullDownResponsesu;
}
if (pullDownResponsesb == "")
{
}
else{
var pullDownValuesb = document.getElementById("resultICR");
var pullDownResponsesb = pullDownValuesb.options[pullDownValuesb.selectedIndex].value;
stuffToCopy = stuffToCopy + "\n" + pullDownResponsesb + "," + " ";
}
if (pullDownResponsesc == "")
{
}
else{
var pullDownValuesc = document.getElementById("moneyNCIS");
var pullDownResponsesc = pullDownValuesc.options[pullDownValuesc.selectedIndex].value;
stuffToCopy = stuffToCopy + pullDownResponsesc + " ";
}
if (pullDownResponsesd == "")
{
}
else{
var pullDownValuesd = document.getElementById("resultMMT");
var pullDownResponsesd = pullDownValuesd.options[pullDownValuesd.selectedIndex].value;
stuffToCopy = stuffToCopy + pullDownResponsesd;
}
if(stuffToCopy.length > 1)
{
var stuffToCopy = stuffToCopy + " " + "Reason:" + " " + document.getElementById('whyNotEligible').value;
}
else{
}
if (pullDownResponsesa == "")
{
}
else{
var pullDownValuesa = document.getElementById("testReleased");
var pullDownResponsesa = pullDownValuesa.options[pullDownValuesa.selectedIndex].value;
stuffToCopy = stuffToCopy + "\n" + pullDownResponsesa;
}
window.clipboardData.setData('text', stuffToCopy);
}
</script>
If somebody skips filling out a note field or skips a dropdown in this example then it will not execute the code like I intended but it does create a new line when copied like this:
taskOne selected
(extra line here since task two wasn't selected)
taskThree selected
I would like there not to be an extra line between Task one and three if task two is skipped. Like this:
taskOne selected
taskThree selected
Note: I know that having else {} is pointless but it helps me visually.
I created snips of exactly what it looks like when copy/pasted from my tool that you can view here if you would like:
Example 1: http://imgur.com/wGO5vnT
Example 2: http://imgur.com/UX1tG5S
Here is an example of my html as well:
<html lang="en">
What tasks are needed for the case?
<br />
<select class="style3" id="taskOne">
<option value=""></option>
<option value="ABN needed">ABN needed</option>
<option value="Auth needed">Auth needed</option>
</select>
</html>

No, it doesn't add a new line, see:
stuffToCopy = "";
controlGroup = "a\nb";
pullDownResponseE = "";
if (pullDownResponseE == "")
{
}
else {
var pullDownValuesE = "taskOne";
var pullDownResponseE = "value";
stuffToCopy = stuffToCopy + "\n" + pullDownResponseE;
}
alert("stuffToCopy:"+stuffToCopy+";(no new-line here)\ncontrolGroup:"+controlGroup);
My guess is that your html is printed in such away that the values you get from the inputs contain an extra new-line at the end. Try changing your html to be 1 line, without new-lines, and test again.
Instead of:
<option value="a
">b
</option>
try:
<option value="a">b</option>

Alright so I fixed it, should have used the almighty document.getElementById instead of attempting to use pullDownReponse for my if statements..
I simply changed the if statements like this:
if (pullDownResponseg == "")
{
}
To this:
if (document.getElementById("taskThree").value == "")
{
}
Thanks for the help from the sincere. (and ridiculous non-answers from the others)

single .js file sharing it's data with 2 html page calls

Hi I have 2 html pages that use functions in a single .js file. The second page needs access to data first initialised by the first page when it calls the .js file:
$(document).ready(function()
{
var destinationTo = "";
var departingFrom = "";
var departing = "";
var returning = "";
var numAdults = "";
var numChildren = "";
var travelType = "";
$("#departing").datepicker();
$("#returning").datepicker();
$("#orderTickets").click(function()
{
destinationTo = $("#myDestination option:selected").text();
departingFrom = $("#myDepart option:selected").text();
departing = $("#departing").val();
returning = $("#returning").val();
numAdults = $("#adults option:selected").text();
numChildren = $("#children option:selected").text();
travelType = $("#class option:selected").text();
var item = document.getElementById("hiddenListItem");
if (departing === "" && returning === "")
{
alert("Please enter your travel dates.");
}
else if (item.style.display !== 'none' && returning === "")
{
alert("Please enter a return date.");
}
else if (departing === "")
{
alert("Please enter a departing date.");
}
else
{
if (item.style.display !== 'list-item')
{
var isConfirmed = confirm("Please confirm your travel: outward journey from " + departingFrom + " on " + departing + " to " + destinationTo +
" adults " + numAdults + " children " + numChildren + " travelling in " + travelType + " coach " + "?");
if(isConfirmed == true)
{
window.location.href = 'PersonDetail.html';
}
}
else
{
var isConfirmed = confirm("Please confirm your travel: outward journey from " + departingFrom + " on " + departing + " to " + destinationTo + " returning on " +
returning + " adults " + numAdults + " children " + numChildren + " travelling in " + travelType + " coach " + "?");
if(isConfirmed == true)
{
window.location.href = 'PersonDetail.html';
}
}
}
});
$("#startAgain").click(function()
{
document.getElementById("travelDetailsForm").reset();
});
$("#finish").click(function()
{
var name = $("#name").val();
var addy1 = $("#address1").val();
var addy2 = $("#address2").val();
var addy3 = $("#address3").val();
var email = $("#email").val();
var number = $("#number").val();
travelType = $("#class option:selected").text();
// test
confirm("name " + name + " addy1 " + addy1 + " addy2 " + addy2 + " addy3 " + addy3 + " email " + email + " number " + number + " detion " + destinationTo);
});
});
I want to be able to access the data in the function call "#orderTickets" in the function "#finish" to dispay the order detils to the user etc. I thought I could put the variables in the global position, but think they reset themselves when another page accesses the .js file.
HTML and javascript are not my thing, would appreciate some help with this.
EDIT: the user clicks "order tickets" on html page 1, .js validates page 1 then directs to html page 2, (same .js file) validates page 2 and hopefully displays data collected from page 1 & 2.

You are partly correct when you say that the variables reset themselves. What actually happens is that each page has their own environment, so the variables from the previous page doesn't even exist any longer. Each page gets their own set of brand new variables.
Also, the variables that you have aren't even global in the page. They exist in the scope of the ready event handler. The reason that the variables exist at all after the ready event handler finishes is that they are caught in the closure of the click event handlers.
To keep the values from one page to the next, you have to store them outside of the page itself. You can for example put the values in a cookie, which you then can read in the second page.

CRM Javascript, multiple independent sets of script on the same OnLoad form

I am new to Javascript, I basically have a form to edit on CRM. I have two pieces of script, independent of each other, they both work fine on their own when I use the OnLoad feature, however when I put both sets of code into the same script developer (since its for the same form on CRM), one of them does not work.
Can anyone help and is there any special syntax to have multiple scripts on the same form?
Thanks
The Javascript is below:
var _roles = 'Compliance'; //array of security roles name
var _fields = 'new_pend'; // array of field schema names to enable
UpdateFields();
/* Functions */
function UpdateFields() {
var oXml = GetCurrentUserRoles();
if (oXml != null) {
var roles = oXml.selectNodes("//BusinessEntity/q1:name");
if (roles != null) {
for (i = 0; i < roles.length; i++) {
for (j = 0; j < _roles.length; j++) {
if (roles[i].text == _roles[j]) {
for (k = 0; k < _fields.length; k++) {
try {
document.getElementById(_fields[k]).Disabled = false;
} catch (e) {
}
}
return;
}
}
}
}
}
return;
}
function GetCurrentUserRoles() {
var xml = "" +
"<?xml version=\"1.0\" encoding=\"utf-8\"?>" +
"<soap:Envelope xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\">" +
GenerateAuthenticationHeader() +
" <soap:Body>" +
" <RetrieveMultiple xmlns=\"http://schemas.microsoft.com/crm/2007/WebServices\">" +
" <query xmlns:q1=\"http://schemas.microsoft.com/crm/2006/Query\" xsi:type=\"q1:QueryExpression\">" +
" <q1:EntityName>role</q1:EntityName>" +
" <q1:ColumnSet xsi:type=\"q1:ColumnSet\">" +
" <q1:Attributes>" +
" <q1:Attribute>name</q1:Attribute>" +
" </q1:Attributes>" +
" </q1:ColumnSet>" +
" <q1:Distinct>false</q1:Distinct>" +
" <q1:LinkEntities>" +
" <q1:LinkEntity>" +
" <q1:LinkFromAttributeName>roleid</q1:LinkFromAttributeName>" +
" <q1:LinkFromEntityName>role</q1:LinkFromEntityName>" +
" <q1:LinkToEntityName>systemuserroles</q1:LinkToEntityName>" +
" <q1:LinkToAttributeName>roleid</q1:LinkToAttributeName>" +
" <q1:JoinOperator>Inner</q1:JoinOperator>" +
" <q1:LinkEntities>" +
" <q1:LinkEntity>" +
" <q1:LinkFromAttributeName>systemuserid</q1:LinkFromAttributeName>" +
" <q1:LinkFromEntityName>systemuserroles</q1:LinkFromEntityName>" +
" <q1:LinkToEntityName>systemuser</q1:LinkToEntityName>" +
" <q1:LinkToAttributeName>systemuserid</q1:LinkToAttributeName>" +
" <q1:JoinOperator>Inner</q1:JoinOperator>" +
" <q1:LinkCriteria>" +
" <q1:FilterOperator>And</q1:FilterOperator>" +
" <q1:Conditions>" +
" <q1:Condition>" +
" <q1:AttributeName>systemuserid</q1:AttributeName>" +
" <q1:Operator>EqualUserId</q1:Operator>" +
" </q1:Condition>" +
" </q1:Conditions>" +
" </q1:LinkCriteria>" +
" </q1:LinkEntity>" +
" </q1:LinkEntities>" +
" </q1:LinkEntity>" +
" </q1:LinkEntities>" +
" </query>" +
" </RetrieveMultiple>" +
" </soap:Body>" +
"</soap:Envelope>" +
"";
var xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
xmlHttpRequest.Open("POST", "/mscrmservices/2007/CrmService.asmx", false);
xmlHttpRequest.setRequestHeader("SOAPAction", " http://schemas.microsoft.com/crm/2007/WebServices/RetrieveMultiple");
xmlHttpRequest.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
xmlHttpRequest.setRequestHeader("Content-Length", xml.length);
xmlHttpRequest.send(xml);
var resultXml = xmlHttpRequest.responseXML;
return (resultXml);
}

Hi everyone who has read this, I found a solution to the problem.
I used an If statement to define what the output should be based on an input into the function. This is shown in the code below, Use this code with the function GetCurrentUserRoles. Thanks for all the help.
if(UserHasRole("Collections") ==true)
{
crmForm.all.new_pend.Disabled = false;
return;
}
else if (UserHasRole("Collections") ==false)
{
crmForm.all.new_pend.Disabled = true;
return;
}
function UserHasRole(roleName)
{
//get Current User Roles, oXml is an object
var oXml = GetCurrentUserRoles();
if(oXml != null)
{
//select the node text
var roles = oXml.selectNodes("//BusinessEntity/q1:name");
if(roles != null)
{
for( i = 0; i < roles.length; i++)
{
if(roles[i].text == roleName)
{
//return true if user has this role
return true;
}
}
}
}
//otherwise return false
return false;
}

So I've restarted my While-loop program and now am getting all NaN or they aren't saving the text I input

I need to write a program for a wedding planner. They wish to create a gift registry for each couple. They want the gifts broken down by the whether the gift giver is on the bride side or groom side. They also know that specific gifts (toasters, silverware, and stemware) tend to be repeated so they want those gifts listed and have the name of the gift giver under them. The repeating gifts are only the ones that have been told you by the client (toasters, silverware, and stemware) they do not want you to determine which gifts repeat, they are just looking for those specific three. So I can implement code for only silverware, stemware, and toasters, which I have this time. But now I cannot get any correct output.
After the program has run, it should have a printout somewhat like this.
Groom side:
Tom: toaster
Bill: silverware
Bob: stemware
Steve: Lexus
Bride side:
Jill: toaster
Suzy: silverware
Pat: stemware
Karen: horse
Multiple toasters by:
Tom
Jill
Multiple silverware by:
Bill
Suzy
Multiple stemware by:
Bob
Pat
Here is what I've got so far...
var guestName;
var gift, side, kind, groomNameAccum, brideNameAccum;
var toaster, silverware, stemware, giftType;
var toasterAccum, silverwareAccum, stemwareAccum;
var noGift = 0;
var groomCounter = 0;
var brideCounter = 0;
//initalizing loop
var guest = "yes";
//start loop
while (guest == "yes") {
side = prompt("Which side are you on? groom or bride?", "");
guestName = prompt("Whats your name?", "");
kind = prompt("What kind of gift?", "");
if (side == "groom") {
groomCounter = groomCounter + 1;
if (groomCounter == 1) {
groomNameAccum = "Groom side: <br>" + groomCounter + ". " + guestName + ": " + kind;
} else {
groomNameAccum = groomNameAccum + "<br>" + groomCounter + ". " + guestName + ": " + kind;
}
} else
if (side == "bride") {
brideCounter = brideCounter + 1;
if (brideCounter == 1) {
brideNameAccum = "<p>Bride side: <br>" + brideCounter + ". " + guestName + ": " + kind;
} else {
brideNameAccum = brideNameAccum + "<br>" + brideCounter + ". " + guestName + ": " + kind;
}
}
if (kind == "toaster")
{
toasterAccum = toasterAccum + "; " + guestName;
}
else if(kind == "silverware")
{
silverwareAccum= silverwareAccum + "; " + guestName;
}else if (kind == "stemware")
{
stemwareAccum = stemwareAccum + "; " + guestName
}
else
{
multiples = 0;
}
guest = prompt("Are there anymore guests?", "yes");
}
document.write(groomNameAccum);
document.write(brideNameAccum);
document.write("<p>Multiple Toasters by:<br>" + toasterAccum + "<br/>");
document.write("Multiple Silverware by:<br>" + silverwareAccum + "<br/>");
document.write("Multiple Stemware by:<br>" + stemwareAccum + "<br/>");
As I was saying, my teacher doesn't try to teach us the shortcuts and easy stuff, because it is a classroom of technical college students. I know there are easier ways to write it out, but I don't know how yet. Hes got his formula for success that always leads me looking for correct answers....