The goal is to be able to click on one of the items and see the description and cost below it. This should be done dynamically. Here is what I have so far:
<!DOCTYPE HTML>
<html>
<head> Assignment 4B
<div id="first" onclick="displayFirst()"> Cleanser </div>
<div id ="second" onclick="displaySecond()"> Exfoliator </div>
<div id ="third" onclick="displayThird()"> Toner </div>
<div id ="fourth" onclick="displayFourth()"> Moisturizer </div>
</head>
<body>
<script type = "text/javascript">
function displayFirst()
{
var d1=document.getElementByID("first");
var text=document.createTextNode("description: will cleanse the face and cost: $20");
d1.appendChild(text);
}
var d2 = document.getElementByID("second");
function displaySecond()
{
var d2=document.getElementByID("second");
var text=document.createTextNode("description: will exfoliate the face and cost: $30");
d1.appendChild(text);
}
var d3 = document.getElementByID("third");
function displayThird()
{
var d1=document.getElementByID("first");
var text=document.createTextNode("description: will toner the face and cost: $15");
d1.appendChild(text);
}
var d4 = document.getElementByID("fourth");
function displayFourth()
{
var d1=document.getElementByID("first");
var text=document.createTextNode("description: will moisturize the face and cost: $50");
d1.appendChild(text);
}
</script>
</body>
</html>
I am able to create the textNode and append it but when I click on the actual item nothing happens. I am not sure if I need to print something out inside each function to get it to display.
Related
I am trying to get IMDB info using JavaScript. The following code is working for Title, Year, IMDB link but when I am trying to get "Runtime", "Director", "Released" etc I am getting as undefined. Please help!
This is the data formate: https://www.omdbapi.com/?i=tt4779682&apikey=ba1f4581
Code:
var data;
function getanswer(q){
$.get("https://www.omdbapi.com/?s="+q+"&apikey=ba1f4581", function(rawdata){
var rawstring =JSON.stringify(rawdata);
data =JSON.parse(rawstring);
var title = data.Search[0].Title;
var year = data.Search[0].Year;
var director = data.Search[0].Director;
var imdburl="https://www.imdb.com/title/"+data.Search[0].imdbID+"/";
var posterurl =data.Search[0].Poster;
document.getElementById('answer').innerHTML="<h1>"+title+"</h1><br> <img src= '"+posterurl+"'><br><p> Year Released:"+year+"</p> <br><p> Year Released:"+director+"</p> <br> <p> IMDB page: <a href='"+imdburl+"'target='_blank'>"+imdburl+"</a></p>"; }); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>
<head></head>
<body onload="getanswer(document.getElementById('querybox').value)">
<!doctype html> <input value="The Meg" onkeyup="getanswer(document.getElementById('querybox').value)" id="querybox"> <div id="answer"></div>
</body>
</html>
According to the api documentation, you were using s parameter that would not return Runtime/Director/etc. You could use the t parameter and remove Search[0].
Below is the code that would work:
var data;
function getanswer(q){
$.get("https://www.omdbapi.com/?t="+q+"&apikey=ba1f4581", function(rawdata){
var rawstring =JSON.stringify(rawdata);
data =JSON.parse(rawstring);
console.log(data);
var title = data.Title;
var year = data.Year;
var director = data.Director;
var imdburl="https://www.imdb.com/title/"+data.imdbID+"/";
var posterurl =data.Poster;
document.getElementById('answer').innerHTML="<h1>"+title+"</h1><br> <img src= '"+posterurl+"'><br><p> Year Released:"+year+"</p> <br><p> Year Released:"+director+"</p> <br> <p> IMDB page: <a href='"+imdburl+"'target='_blank'>"+imdburl+"</a></p>"; }); }
The result of the following code is only 🧜🏽♂️ 🏾🏿🛀🛌🏻🏼🧑🤝👭👩👫👨👬, where I want to find all the unique graphic represationations shown in the Firefox output that I copied to the var a originally. (Basically the code should show the original a string as output.)
How to do that?
<html>
<head>
<meta charset="UTF-8" />
<script>
var a = '🧜🏽♂️ 🧜🏾♂️ 🧜🏿♂️ 🧜🛀🏿 🛌🏻 🛌🏼 🛌🏽 🛌🏾 🛌🏿 🧑🏻🤝🧑🏻 🧑🏻🤝🧑🏼 🧑🏻🤝🧑🏽 🧑🏻🤝🧑🏾 🧑🏻🤝🧑🏿 🧑🏼🤝🧑🏻 🧑🏼🤝🧑🏼 🧑🏼🤝🧑🏽 🧑🏼🤝🧑🏾 🧑🏼🤝🧑🏿 🧑🏽🤝🧑🏻 🧑🏽🤝🧑🏼 🧑🏽🤝🧑🏽 🧑🏽🤝🧑🏾 🧑🏽🤝🧑🏿 🧑🏾🤝🧑🏻 🧑🏾🤝🧑🏼 🧑🏾🤝🧑🏽 🧑🏾🤝🧑🏾 🧑🏾🤝🧑🏿 🧑🏿🤝🧑🏻 🧑🏿🤝🧑🏼 🧑🏿🤝🧑🏽 🧑🏿🤝🧑🏾 🧑🏿🤝🧑🏿 👭🏻 👩🏻🤝👩🏼 👩🏻🤝👩🏽 👩🏻🤝👩🏾 👩🏻🤝👩🏿 👩🏼🤝👩🏻 👭🏼 👩🏼🤝👩🏽 👩🏼🤝👩🏾 👩🏼🤝👩🏿 👩🏽🤝👩🏻 👩🏽🤝👩🏼 👭🏽 👩🏽🤝👩🏾 👩🏽🤝👩🏿 👩🏾🤝👩🏻 👩🏾🤝👩🏼 👩🏾🤝👩🏽 👭🏾 👩🏾🤝👩🏿 👩🏿🤝👩🏻 👩🏿🤝👩🏼 👩🏿🤝👩🏽 👩🏿🤝👩🏾 👭🏿 👫🏻 👩🏻🤝👨🏼 👩🏻🤝👨🏽 👩🏻🤝👨🏾 👩🏻🤝👨🏿 👩🏼🤝👨🏻 👫🏼 👩🏼🤝👨🏽 👩🏼🤝👨🏾 👩🏼🤝👨🏿 👩🏽🤝👨🏻 👩🏽🤝👨🏼 👫🏽 👩🏽🤝👨🏾 👩🏽🤝👨🏿 👩🏾🤝👨🏻 👩🏾🤝👨🏼 👩🏾🤝👨🏽 👫🏾 👩🏾🤝👨🏿 👩🏿🤝👨🏻 👩🏿🤝👨🏼 👩🏿🤝👨🏽 👩🏿🤝👨🏾 👫🏿 👬🏻 👨🏻🤝👨🏼 👨🏻🤝👨🏽 👨🏻🤝👨🏾 👨🏻🤝👨🏿 👨🏼🤝👨🏻 👬🏼 👨🏼🤝👨🏽 👨🏼🤝👨🏾 👨🏼🤝👨🏿 👨🏽🤝👨🏻 👨🏽🤝👨🏼 👬🏽 👨🏽🤝👨🏾 👨🏽🤝👨🏿 👨🏾🤝👨🏻 👨🏾🤝👨🏼 👨🏾🤝👨🏽 👬🏾 👨🏾🤝👨🏿 👨🏿🤝👨🏻 👨🏿🤝👨🏼 👨🏿🤝👨🏽 👨🏿🤝👨🏾 👬🏿 🏻 🏼 🏽 🏾 🏿 ';
var b = [...new Set([...a])];
var c = b.join('');
function init() { document.getElementById('result').innerHTML = c; }
</script>
</head><body onload="init()">
<span id="result"></span>
</body>
</html>
I have this code and trying to print the results but it's not printing, please help. thankyou.
function GetRandom() {
var myElement = document.getElementById("pwbx")
var myArray = ['item 1', 'item 2'];
var item = myArray[(Math.random()*myArray.length)|0];
myElement.value = (item);
}
<!DOCTYPE html>
<html>
<body>
<p> click the button to run the fumction</p>
<button onclick="GetRandom()">Try it</button>
<p id="pwbx"></p>
</body>
</html>
it works where i use the input form type to get the results but i don't want that, i want it to just be echoed as a normal text in the page. thanks. i am a noob in this stuff so looking for help.
function GetRandom() {
var myElement = document.getElementById("pwbx")
var myArray = ['item 1', 'item 2'];
var item = myArray[(Math.random()*myArray.length)|0];
myElement.value = (item);
}
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display a random number between 1 and 10.</p>
<button onclick="GetRandom()">Try it</button>
<input name="test" type="text" id="pwbx" value="">
<p id="pwbx"></p>
</body>
</html>
<p> tag doesn't have a value property. Use innerHTML instead.
function GetRandom()
{
var myElement = document.getElementById("pwbx")
var myArray = ['item 1', 'item 2'];
var item = myArray[(Math.random()*myArray.length)|0];
myElement.innerHTML = item;
}
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display a random number between 1 and 10.</p>
<button onclick="GetRandom()">Try it</button>
<p id="pwbx"></p>
</body>
</html>
as Tim said in the comments... you will want to use innerHTML not value for non input tags....
<!DOCTYPE html>
<html>
<body>
<p> click the button to run the fumction</p>
<button onclick="GetRandom()">Try it</button>
<p id="pwbx"></p>
</body>
<script>
var myArray = ['item 1', 'item 2']; //should move this outside of getRandom so it doesn't reallocate each run;
function GetRandom() {
var randomInt = Math.floor(Math.random() * Math.floor(myArray.length));
var item = myArray[randomInt];
document.getElementById("pwbx").innerHTML = item;
}
</script>
</html>
SO I have code that I'm trying to implement from my jsfiddle into an actual working website/mini-app. I've registered the domain name and procured the hosting via siteground, and I've even uploaded the files via ftp so I'm almost there...
But I'm thinking there's something wrong with my HTML code or JS code or how I implemented my JS code into my HTML code, because all of the HTML and CSS elements are present, but the javascript functionality is absent.
Here is my fiddle:
jsfiddle
^^ Click on start to see the display in action (which doesn't work in the actual website, which leads me to believe there's an issue with my JS file - whether it be code-related or whether that's because I integrated the file incorrectly) (or maybe even uploaded to the server incorrectly, perhaps?)...
And here is the actual site:
http://www.abveaspirations.com/index.html
And here's my HTML code uploaded to the server via FTP:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id='frame'>
<div id='display'>
<h1 id='output'></h1>
</div>
</div>
<div class="spacer">
</div>
<div id="main"> <!-- 11main -->
<h1 id='consoleTitle'>Control Board</h1>
<h5 id='consoleSub'><i>Double-click on an entry to remove. And add entries to your heart's desire...</i></h5>
<div id="controlbox"> <!-- ##controlbox -->
<div id="controlpanel"></div>
<div class="spacer"></div>
<div id="formula"> <!--formula -->
<form id="frm" method="post">
<input id="txt" type="text" placeholder="Insert your own entry here..." name="text">
<input id='submitBtn' type="submit" value="Start">
<input id='stop' type="button" value="Stop">
<select id="load1">
<option id='pre0' value="Preset 0">Preset 0</option>
<option id='pre1' value="Preset 1">Preset 1</option>
<option id='pre2' value="Preset 2">Preset 2</option>
</select>
<!-- These are for buttons as opposed to OPTION...
<input id="load" type="button" value="Preset 1">
<input id="load2" type="button" value="Preset 2"-->
</form>
</div> <!-- formula -->
</div> <!-- ##controlbox -->
</div> <!-- 11main -->
</body>
And my JS code, also uploaded to server via FTP (I didn't include the accompanying CSS file, but if that would help, I can provide ):
$(document).ready(function () {
var txtBox = $('#txt');
var frm = $('#frm');
var output = $('#output');
var subBtn = $('#submitBtn');
var stopBtn = $('#stop');
var loadBtn = $('#load');
var loadBtn2 = $('#load2');
var loadBtnA = $('#load1');
var pre0 = $('#pre0');
var pre1 = $('#pre1');
var pre2 = $('#pre2');
var txt = $('#display');
var preset1 = ["1", "2", "3"];
var preset2 = ["a", "b", "c"];
var container = ["What we do in life echoes in all eternity.", "Find your purpose and give it life.", "When you work your hardest, the world opens up to you."];
var console = $('#controlpanel');
var oldHandle;
function loadPreset0() {
container = [];
console.empty();
container = ["What we do in life echoes in all eternity.", "Find your purpose and give it life.", "When you work your hardest, the world opens up to you."];
updateConsole();
};
function loadPreset1() {
container = [];
console.empty();
container = preset1;
updateConsole();
};
function loadPreset2() {
container = [];
console.empty();
container = preset2;
updateConsole();
};
$(pre0).data('onselect', function() {
loadPreset0();
});
$(pre1).data('onselect', function() {
loadPreset1();
});
$(pre2).data('onselect', function() {
loadPreset2();
});
$(document).on('change', 'select', function(e) {
var selected = $(this).find('option:selected'),
handler = selected.data('onselect');
if ( typeof handler == 'function' ) {
handler.call(selected, e);
}
});
function updateConsole() {
for (var z = 0; z < container.length; z++) {
var resultC = container[z];
var $initialEntry = $('<p>' + '- ' + resultC + '</p>');
console.append($initialEntry);
};
};
updateConsole();
frm.submit(function (event) {
event.preventDefault();
if (txtBox.val() != '') {
var result = txtBox.val();
container.push(result); //1.
var resultB = container[container.length-1];
var $entry = $('<p>' + '- ' + resultB + '</p>');
console.append($entry); //2.
}
var options = {
duration: 5000,
rearrangeDuration: 1000,
effect: 'random',
centered: true
};
stopTextualizer();
txt.textualizer(container, options);
txt.textualizer('start');
txtBox.val('');
});
$("#controlbox").on('dblclick', 'p', function() {
var $entry = $(this);
container.splice($entry.index(), 1);
$entry.remove();
});
function stopTextualizer(){
txt.textualizer('stop');
txt.textualizer('destroy');
}
$(stopBtn).click(function() {
stopTextualizer();
});
});
Any help would be appreciated. I guess I'm just not sure what to do after uploading the html file to the server via ftp. Or maybe I did that correctly and there's something wrong with my code that I'm overlooking. Basically I'm lost. So help please!
You forgot to load jQuery. Make sure that you use <script src="../path-to-jquery/jquery.js"></script> before you load your script.js script.
Also, I noticed that you're loading your scripts in the head tag. This is bad practice, load them right before </body>.
I believe your site is missing jQuery. Add this to the top of your code to hotlink to google's jQuery.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I'm having trouble, grabbing the user input, and having the onclick operator create additional paragraphs with each click.
Here is my HTML code.
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Add Paragraph </title>
<meta charset='utf-8' >
<script src="../js/addPara.js" type="text/javascript"></script>
</head>
<body>
<div>
<input type='text' id='userParagraph' size='20'>
</div>
<div id="par">
<button id='heading'> Add your paragraph</button>
</div>
</body>
</html>
Here is Javascript code:
window.onload = function() {
document.getElementById("addheading").onclick = pCreate;
};
function pCreate() {
var userPar= document.createElement("p");
var parNew = document.getElementById('userParagraph').value;
userPar.innerHTML = par;
var area = document.getElementById("par");
area.appendChild(userPar);
}
userPar.innerHTML = par;
should be
userPar.innerHTML = parNew;
In your code:
> window.onload = function() {
> document.getElementById("addheading").onclick = pCreate;
> };
Where it is possible (perhaps likely) that an element doesn't exist, best to check before calling methods:
var addButton = document.getElementById("addheading");
if (addButton) {
addButton.onclick = pCreate;
}
Also, there is no element with id "addheading", there is a button with id "heading" though.
> function pCreate() {
> var userPar= document.createElement("p");
> var parNew = document.getElementById('userParagraph').value;
> userPar.innerHTML = par;
I think you mean:
userPar.innerHTML = parNew;
if you don't want users inserting random HTML into your page (perhaps you do), you can treat the input as text:
userPar.appendChild(document.createTextNode(parNew));
.
> var area = document.getElementById("par");
> area.appendChild(userPar);
> }
Your variable names and element ids don't make a lot of sense, you might wish to name them after the data or function they represent.
I did it and it worked.
<html lang='en'>
<head>
<title>Add Paragraph </title>
<meta charset='utf-8' >
<script>
window.onload = function() {
document.getElementById("heading").onclick = pCreate;
}
function pCreate() {
var userPar= document.createElement("p");
var parNew = document.getElementById('userParagraph').value;
userPar.innerHTML = parNew;
var area = document.getElementById("par");
area.appendChild(userPar);
}
</script>
</head>
<body>
<div>
<input type='text' id='userParagraph' size='20'>
</div>
<div id="par">
<button id='heading'> Add your paragraph</button>
</div>
</body>
</html>```