I am just beginning with JavaScript and what I am trying to achieve now is to add bold style to a variable result. The code that I am refering to is the following:
if(isNumeric(n)) {
document.write("The square root of " + n + " is " + answer);
}
else {
alert('This is not a number!');
}
I want to make the variable answer to appear in bold and the result to look like this:
Example: The square root of 4 is 2
Thank you all in advance!
It's just a matter of adding some HTML ?
if(isNumeric(n)) {
document.write("The square root of " + n + " is <strong>" + answer + "</strong>");
} else {
alert('This is not a number!');
}
This is fine for testing, but in production you wouldn't really use document.write, and preferably you'd use an external stylesheet and a wrapper element to make parts of the text bold.
Related
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.
I'm trying to create 5 different audio players from the following code to call them out individually wherever I need it in the HTML document: https://codepen.io/katzkode/pen/ZbxYYG
The issue is that this 2 loops use a single div element to call the function:
For audio:
/* createAudioElements
* create audio elements for each file in files */
function createAudioElements() {
for (f in files) {
var audioString = "<audio id=\"audio-" + f + "\" class=\"audio\" preload=\"true\"><source src=\"http://www.alexkatz.me/codepen/music/" + files[f] + "\"></audio>";
$("#audio-players").append(audioString);
}
}
For div element:
/* createAudioPlayers
* create audio players for each file in files */
function createAudioPlayers() {
for (f in files) {
var playerString = "<div id=\"audioplayer-" + f + "\" class=\"audioplayer\"><button id=\"playbutton-" + f + "\" class=\"play playbutton\"></button><div id=\"timeline-" + f + "\" class=\"timeline\"><div id=\"playhead-" + f + "\" class=\"playhead\"></div></div></div>";
$("#audio-players").append(playerString);
}
}
But what I'm trying to do is to create 5 different elements to tickle them all individually and call them wherever I need it in the website with div id="audio-players1", div id="audio-players2", etc.
I've tried to do this for both loops:
Instead of
$("#audio-players")
Add this:
$("#audio-players" + f)
But then the buttons won't work.
Here's the code to pull the files from:
var files = ["interlude.mp3", // 0
"chooseyourweapon.mp3", // 1
"interlude.mp3", // 2
"scriptures.mp3",
"scriptures.mp3"// 3
];
And I'm unsure how to proceed, I'm still learning. Thank you.
Here's a CODEPEN of what you're looking for.
Changes compared to your code:
Re-ordered div and audio creation:
createAudioPlayers();
createAudioElements();
As you need something like #audio-players2, just tweaked this code a bit:
for (f in files) {
var playerString = "<div id=\"audio-players-" + f + "\" class=\"audioplayer\"><button id=\"playbutton-" + f + "\" class=\"play playbutton\"></button><div id=\"timeline-" + f + "\" class=\"timeline\"><div id=\"playhead-" + f + "\" class=\"playhead\"></div></div></div>";
$("body").append(playerString);
}
In the function createAudioElements(), append audio based on the audio-player (DIV) ID:
$("#audio-players-"+f).append(audioString);
Edit:
New CODEPEN. I think I figured out the issue here. So when you try to add the players separately, the buttons wouldn't work BUT when they were added on the go while creation, all worked fine, right?
So here's the thing: bindAudioPlayer wasn't finding the correct element on adding a player separately to the DOM as well as the timeline and other elements.
In the new codepen, I've added a button with a select option, which when selected adds a particular player (based on the value) to the DOM. Check the onClick code:
$('a.add_player').click(function() {
var val = $(this).parent().find('select.player_num').val();
if(!$('body div#audio-players'+val).length) {
var playerString = "<div id=\"audio-players" + val + "\" class=\"audioplayer\"><button id=\"playbutton-" + val + "\" class=\"play playbutton\"></button><div id=\"timeline-" + val + "\" class=\"timeline\"><div id=\"playhead-" + val + "\" class=\"playhead\"></div></div><audio id=\"audio-" + val + "\" class=\"audio\" preload=\"true\"><source src=\"http://www.alexkatz.me/codepen/music/" + files[val-1] + "\"></audio></div>";
$("body").append(playerString);
// Populate Audio List
populateAudioList(val);
populateComponentDictionary(val);
}
});
If you can also check the populateAudioList function, in which the loop is gotten rid of and the passed value is used to select the DOM element and accordingly events are bound to the selector.
Let me know if this is the desired output. Hope this helps. :)
Edit 2
CODEPEN
I've added a function named createAudioPlayersSeparately() which, I think, fulfils the requirement.
If you notice, I've swapped files for player 3 and player 4 i.e. used file 4 for player 3 and file 3 for player 4. Now, that means, it should be easy enough to call any player with any audio "wherever" you'd like on the page. Just make sure you call populateAudioList() and populateComponentDictionary() accordingly.
Hope this helps. :)
I need the values of the name, address, size, and topping fields to appear in a text box. Without problems the name and address appears correctly. However I can't seen to get the size function to work. It is a radio button, and thus I need only one size to appear. I haven't even tried an if else for the checkbox yet. Here is my code
<html>
<head>
<script>
function pizza() {
document.pizzaboy.comments.value = "Name:" + " " + pizzaboy.name.value + "\n" + "Address:" + " " + pizzaboy.address.value + "\n" + document.getElementById("small").value + document.getElementById("medium").value + document.getElementById("large").value + "\n" + pizzaboy.toppings.value;
{
var rslt = "";
if (document.pizzaboy.size[0].checked) {
rslt = rslt + "Size=Small\n";
} else if (document.pizzaboy.size[1].checked) {
rslt = rslt + "Size=Medium\n";
} else rslt = rslt + "Size=Large\n";
return rslt;
}
}
</head>
The second Javascript bracket might be throwing you an error, keeping your code from running correctly.
In this post, several (more general) ways to get values of radio buttons are explained:
Checking Value of Radio Button Group via JavaScript?
The first answer is using jQuery, but the following answers will help you i think.
You should try this. Answer here if you need further assistance.
I made a webpage that needs javascript. More specifically if anyone has heard of it, I am using an Ajax-Solr API to make a good user interface for an Apache Solr/Lucene Search Engine. For some of the results that come up (which are webpages that have been crawled), javascript is embedded on some of the webpages, and that is messing up part of my subsequent html/javascript. Help me out. Here is some of my code:
AjaxSolr.theme.prototype.snippet = function(doc) {
var output = '' + doc.id;
if (doc.text.length > 300) {
output += doc.text.substring(0, 300);
output += '<span style="display:none;">' + doc.text.substring(300);
output += '</span> <br id="aftsnippet"/><button id = "expand' + doc.id + '">Expand/Contract</button>';
} else {
output += doc.text + '<br/>';
}
output+='<a id="goToSite"><button>Go to Site</button></a><button id = "sitedetailsbutton' + doc.id + '">Site Details</button>';
return output;
};
I don't know if that helps, but pretty much what happens is that doc.text might contain some random javascript from a javascript file online, and then that causes the buttons from
<button>Go to Site</button></a><button id = "sitedetailsbutton' + doc.id + '">Site Details</button>';
to not show up. What could I do to fix this?
You need to HTML-encode the JavaScript. You can do that with the following.
function htmlEncode(s) {
return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
}
Also, you can replace newline characters with <br />, as appropriate:
function htmlEncode(s) {
return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/\n/g,'<br />');
}
I'm using Raphael for drawing some elements on a website. The elements include rectangle, line (path). I have given an id to the path element and trying to access it in the onclick event of that line. but when I do an alert of the id, nothing is visible. Following is the code snippet
function createLine()
{
var t = paper.path("M" + xLink + " " + yLink +"L" + linkWidth + " " + linkHeight);
t.attr('stroke-width','3');
t.attr('id','Hello');
t.node.onclick = processPathOnClick;
}
function processPathOnClick()
{
alert($(this).attr("id"));
}
Can anyone please tell me what is the problem with the above code. Any pointer will be helpful.
Thanks
Are you sure you don't want to write $(t.node).attr('id','Hello'); instead?
Update: someone just downvoted this answer. And I truly feel obligated to point out this way of setting the id isn't particularly good. You would be better off using:
t.node.id = 'Hello';
I wish there was a way to credit Juan Mendes, other than upvoting his comment to this answer.
Try this:
function createLine() {
var t = paper.path("M" + xLink + " " + yLink +"L" + linkWidth + " " + linkHeight);
t.attr('stroke-width','3');
t.id = 'Hello';
t.node.onclick = processPathOnClick;
}
function processPathOnClick() {
alert($(this).id);
alert(this.id); // This should work too...
}
Basically you are creating a new property called "id" on your Raphael line instance variable "t". It's kind of hacking, in my opinion, but it does the trick just fine.
Try setting the handler using jquery
function createLine()
{
var t = paper.path("M" + xLink + " " + yLink +"L" + linkWidth + " " + linkHeight);
t.attr('stroke-width','3');
t.attr('id','Hello');
$(t.node).click(processPathOnClick);
}
function processPathOnClick()
{
alert($(this).attr("id"));
}