Develop Reference

How to write the HTML code for the inline element showing an image for use in webpage?

I'm writing my first code in an interactive/follow-along program through Cengage (MindTap). The program is instructing me to "write the HTML code for the inline element showing the sky image to use in the webpage." I am supposed to create a variable named imgStr that stores this text string:
<img src='sd_skyMap.png' />
Where Map is the value of the mapNum variable (there are 23 files titled sd_sky0, sd_sky1, sd_sky3 and so fourth). It says to use the + operator to combine text strings together and to include single-quote characters within the text strings.
I cannot get the sky images to appear on the webpage to save my life.
I've attempted going through a tutor provided through my university but have still have no luck getting the image to display.
var imgStr = "<img src='sd_sky0 + sd_sky1 + sd_sky2 + sd_sky3 +
sd_sky4 + sd_sky5 + sd_sky6 + sd_sky7 + sd_sky8 + sd_sky9 +
sd_sky10 + sd_sky11 + sd_sky12 + sd_sky13 + sd_sky14 + sd_sky15
+ sd_sky16 + sd_sky17 + sd_sky18 + sd_sky19 + sd_sky20 +
sd_sky21 + sd_sky22 + sd_sky23' + mapNum + '.png' />";
document.getElementById("planisphere").insertAdjacentHTML() = imgStr;
Having inserted the code into jshint.com, it stated one warning and one unused variable.
(Bad assignment.)
document.getElementById("planisphere").insertAdjacentHTML() = imgStr;
and mapNum is an unused variable.

InsertAdjacentHTML takes two strings as parameters.
The first parameter is the position which takes one of four static values.
The second parameter is your HTML string to be inserted.
An example for what you want could be:
document.getElementById("planisphere").insertAdjacentHTML('afterbegin', imgStr);

You were nearly there, just append beforeend using the document.insertAdjacentHTML()
const imgStr = `<img src='sd_sky0 + sd_sky1 + sd_sky2 + sd_sky3 +
sd_sky4 + sd_sky5 + sd_sky6 + sd_sky7 + sd_sky8 + sd_sky9 +
sd_sky10 + sd_sky11 + sd_sky12 + sd_sky13 + sd_sky14 + sd_sky15
+ sd_sky16 + sd_sky17 + sd_sky18 + sd_sky19 + sd_sky20 +
sd_sky21 + sd_sky22 + sd_sky23' + mapNum + '.png' />`;
document.getElementById("planisphere").insertAdjacentHTML('beforeend', imgStr);
<div id = "planisphere">
</div>

There are two problems on your code, the first is you need to run trough the different image files and add each one separately. On the code you provided, all image's names are being combined as one.
The second problem is your use of the insertAdjacentHTML() function. The function expects as arguments the position of the new tag and the tag itself, none is being passed. Check here for a better explanation.
Assuming you have n images that you want to add as n tags, you can try something like this:
// variable to hold the total number of images used
var numberOfImages = 23;
// we loop trough all images, where i will count from 0 to numberOfImages
for (var i = 0; i < numberOfImages; i++) {
// on each step of the loop we add a new img tag with sd_skyi as source
document.getElementById("planisphere")
.insertAdjacentHTML('afterend', "<img src='sd_sky" + i + ".png' />")
}
If you use this exerpt as is, it will add 23 img tags to an element with id planisphere.

The value passed in onclick() attribute of dynamically generated anchor tag is ending with first space

have to pass two parameters in the onlclick() of anchor tag which is being generated from code behind(c#).if there is any space in the first parameter the onclick() is being closed with double quotes. It is not taking the complete value.
LiteralControl lc2 = new LiteralControl();
lc2.Text = String.Format("<a href='#' class='easyui-linkbutton' " + #"onclick=addTab(" + childMenus[j].MenuName.ToString() + "," + url + #")> " + #" Setting " + #" </a>");
screenshot of browser's inspect element :
the value of first parameter is "Exam and course setting" but it is ending after "Exam" at first space. It is assuming space as ending.

I've changed the controls in my lc2 string to use string variables to demonstrate how you can create the escaped html:
string MenuName = "Exam and course setting";
string url = "http://stackoverflow.com";
var lc2 = "<a href='#' class='easyui-linkbutton' " + #"onclick='addTab(""" + MenuName.ToString() + #""",""" + url + #""")'>" + #"Setting" + #"</a>";
which will generate the following:
<a href='#' class='easyui-linkbutton' onclick='addTab("Exam and course setting","http://stackoverflow.com")'>Setting</a>
Don't forget to HTMLEncode any text from the controls if they contain single or double quotes. You can replace with ' for ' and
" for ".

Styling each <li> a different way with JQuery

weird little bug I can't figure out, I have the following line:
$("#ingredientlist").append('<li>' + value + ' parts ' + capitalize(index + '') + '</li>').css("color", curColor);
Basically, in a previous statement I get curColor, which is different depending on what value I'm on. I checked the colors and they're different each time. I want each <li> to be styled to a specific color, so I tried setting the .css() to that, but all my entries are the same color. Any ideas?
Thanks

Currently you are appending li to $("#ingredientlist") then setting its color
You need to set color of li not its parent.
Use
$("#ingredientlist").append(
$('<li></li>')
.text(value + ' parts ' + capitalize(index + ''))
.css("color", curColor)
);

The issue is because append() returns the parent element, not the one which was appended. This means that your code is actually setting the color of the #ingredientlist element, not the li. Try this instead:
$('<li />', { text: value + ' parts ' + capitalize(index + '') })
.css('color', curColor)
.appendTo('#ingredientlist');

You're applying the .css call to the #ingredientlist set, not the li you're appending.
Instead:
$("#ingredientlist").append($('<li>' + value + ' parts ' + capitalize(index + '') + '</li>').css("color", curColor));
// Changes -----------------^^-------------------------------------------------------------------------------------^
Breaking that up into parts just to make it clearer:
var $li = $('<li>' + value + ' parts ' + capitalize(index + '') + '</li>');
$li.css("color", curColor);
$("#ingredientlist").append($li);

Get value of textbox with Javascript

I have a textbox for users to enter a new email address. I have a button that calls a script. In the script I need to access several different elements of the page. The first couple of elements, that were sent as parameters to the page (via PHP) work fine, but I do not get the right result when I try to get the value of the text box.
This is my HTML:
<p>Please enter the new email</p>
<input type="email" id="newemail" value="enter new email here">
and this is my JS:
var userid=$('#userId').val();
var oldEmail=$('#useremail').val();
var newEmail=$('#newemail').val();
//I have also tried with var newEmail=document.getElementById("newemail").value
//with no difference in the result
alert(userid + " " + oldEmail + " " + newemail);
The alert prints out :
5 Sammy [object HTMLInputElement]
I note that it is printing neither the old value of the text box nor the new value which the user entered. How to I get it to get that value?

Javascript is case sensitive. newemail should be newEmail.
When referencing newemail you are accessing window.newemail which will by default return the DOM element with ID newemail. Calling .toString() on that DOM element produces [object HTMLInputElement].
Change the alert to:
alert(userid + " " + oldEmail + " " + newEmail);

The variable is newEmail, but in alert you are using newemail, they are case sensitive.
Then how newemail is working, because since it is the id of an element the property will be added as a window elements property

replace
alert(userid + " " + oldEmail + " " + newemail);
by
alert(userid + " " + oldEmail + " " + newEmail);

Is it possible that there is a typo?
alert(userid + " " + oldEmail + " " + newemail);
doesnt fit the variable declarations:
var newEmail=$('#newemail').val();

error in adding class to a pargraph element which is defined inside document.write() of javascript

this is my js code-
var str1 = "Wardrobe Makeover";
var str2 = "Female Fashion Makeover";
var str3 = "Male Fashion Makeover";
var menu1=new Array()
menu1[0]= document.write("<p>" + str2.link("http://abc.com/mystylemuse/wardrobe_makeover") + "</p>");
menu1[1]= document.write("<p>" + str2.link("http://abc.com/mystylemuse/female") + "</p>");
menu1[2]= document.write("<p>" + str3.link("http://abc.com/mystylemuse/male") + "</p>");
whenever i add a css class name inside <p>, like- document.write("<p class="abc">" + str2.link("http://abc.com/mystylemuse/wardrobe_makeover") + "</p>"); it shows error. please tell me how can i add a class inside <p> element.

It should be:
document.write("<p class=\"abc\">" + str2.link("http://abc.com/mystylemuse/wardrobe_makeover") + "</p>");

If your string includes double quotes, then you can use single quotes as string delimiters, and vice versa.
'<p class="abc">'
or
"<p class='abc'>"