I am trying to print img by creating a new div and then appending it with image but image is not getting displayed.
HTML
<body>
<div id="col" class="container-fluid">
<h2>Rock Paper Scissor</h2>
<div class="row">
<div id="col-1" class="col-lg-4">
<img id="rock"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTNKl4bKaZufRk7DkQGewkv4cNYlQ0qpkdyA&usqp=CAU"
alt="" onclick="rpsGame(this)">
</div>
<div class="col-lg-4">
<img id="paper"
src="data:image/jpeg;base64,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"
alt="" onclick="rpsGame(this)">
</div>
<div class="col-lg-4">
<img id="scissor" onclick="rpsGame(this)"
src="data:image/jpeg;base64,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"
alt="">
</div>
</div>
</div>
<script src="index.js" async defer></script>
</body>
JS
Here rpsGame is the main function and function rpsFrontEnd is called and the parameters for rpsFrontEnd are correct.
function rpsGame(yourChoice) {
var humanChoice = yourChoice.id;
var botChoice = noToChoice(randTorpsInt());
console.log("bot choice " + botChoice);
console.log("your choice " + humanChoice);
var results = decideWinner(humanChoice, botChoice);
console.log(results);
var message = finalMessage(results);
console.log(message);
rpsFrontEnd(humanChoice, botChoice, message);
}
This rpsFrontend first removes all images and then create a new div and append an img into it but img is not getting printed
function rpsFrontEnd(humanImageChoice, botImageChoice, finalMessage) {
var imageDatabase = {
"rock": document.getElementById("rock").src,
"paper": document.getElementById("paper").src,
"scissor": document.getElementById("scissor").src
}
document.getElementById("rock").remove();
document.getElementById("paper").remove();
document.getElementById("scissor").remove();
var humanDiv = document.createElement("div");
var botDiv = document.createElement("div");
var messageDiv = document.createElement("div");
humanDiv.innerHTML="<img src'"+imageDatabase[humanImageChoice]+"'>";
console.log(humanDiv);
document.getElementById("col").appendChild(humanDiv);
}
Thanks for your time!
document.getElementById("row").appendChild(humanDiv);
This line isn't working because you don't have an element with the ID row in your HTML - it is a class so getElementById isn't finding it.
Change this
<div class="row">
to this
<div id="row">
After one hour I got answer very small error
humanDiv.innerHTML="<img src='"+imageDatabase[humanImageChoice]+"'>";
an equal to sign was missing in innerHtml again thanks to those who gave here time
Related
I wanted to change the style of the second div-element from the innerHTML when i click on the img, but this doesnt work.
function display(restaurantArr, name){
title.innerHTML = `<h2>Available restaurants in ${name}:`
for(let items of restaurantArr){
console.log(items)
main.innerHTML += `
<div class="container">
<p class="containerP">${items.restaurant.name}</p>
<img onclick="editDiv2()" id="imageid" class="imgAdd" src="pngwave.png">
</div>
<div id="someid" class="container2">
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
`
}
}
The function where i tried to edit the second div. Although i understand why this doesnt work, it is a visualisation of what i tried to do:
function editDiv2(){
const div2 = document.querySelector('.div2')
div2.style.color = "red";
}
It works for me:
display([{
restaurant: {
name: 'Restaurant Name'
}
}], 'London')
function display(restaurantArr, name) {
title.innerHTML = `<h2>Available restaurants in ${name}:`
for (let items of restaurantArr) {
console.log(items)
main.innerHTML += `
<div class="container">
<p class="containerP">${items.restaurant.name}</p>
<img onclick="editDiv2()" id="imageid" class="imgAdd" src="pngwave.png">
</div>
<div id="someid" class="container2">
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
`
}
}
function editDiv2() {
const div2 = document.querySelector('#someid')
div2.style.color = "red";
}
<h2 id="title"></h2>
<div id="main"></div>
<img onclick="div2()"
should be
<img onclick="editDiv2()"
Or the editDiv2 function will not get called.
(function() {
display()
clickEvent()
})();
function display(){
main = document.getElementById("div1")
main.innerHTML = '<div class="container"><p class="containerP">${items.restaurant.name}</p><img id="imageid" class="imgAdd" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/330px-Image_created_with_a_mobile_phone.png"></div><div id="someid" class="container2"><p>Test</p><p>Test</p><p>Test</p></div>'
}
function clickEvent(){
var image = document.getElementById("imageid")
image.addEventListener("click", function(){
const div2 = document.querySelector('.container2')
div2.style.color = "red";
})
}
Where ever you call your display function add a new function for your task and call it below display so it can register dom element its click event listner.
Here is the updated fiddle.
https://jsfiddle.net/3h61jdfv/
As this is created dynamically you need to add event dynamically to
add an ID to the Image
<img id="image" class="imgAdd" src="pngwave.png">
then write a click function
const image = document.getElementById("image")
image.addEventListener("click", function(){
const div2 = document.querySelector('.div2')
div2.style.color = "red";
})
unlApp.Social.postCmtText = function (postdata)
{
var cPage = $.mobile.activePage;
var cmnt_text = cPage.find(".comment_textarea").val().trim();
if (cmnt_text.length === 0)
{
alert("Comment cannot be empty");
}
}
<div class="cmts_footer" data-role="footer" data-tap-toggle="false" data-position="fixed">
<div contenteditable="true" data-placeholder="Write your comment" class="cmttextarea comment_textarea"></div>
<div class="send_img_btn">
<img class="send_cmnt_btn arrow" src="img/arrows.png" alt="send" onclick="commentSendbtn(this);" />
<img class="cmntpostloadimg loadbar" src="img/commentsloading.gif" alt="loading..." />
</div>
</div>
error i have received comments cannnot be blank
please could any one let me know what was the problem
.comment_textarea is a (contenteditable) div. Its content will be its text, not its value per se.
Try changing:
var cmnt_text = cPage.find(".comment_textarea").val().trim();
with:
var cmnt_text = cPage.find(".comment_textarea").text().trim();
I have 3 images. What i want to do is when i click on any one of the image a random image should be displayed on a div.
Here is the code. Help please.
var iarr=["1.jpg","2.jpg","3.jpg"];
function select()
{
var random=Math.floor(Math.Random()*3);
document.getElementById('disp').innerHTML = iarr[random];
}
<html>
<body>
<h4> MAKE A CHOICE </h3>
<img id='x' onclick="select" src='1.jpg'/>
<img id='y' onclick="select" src='2.jpg'/>
<img id='z' onclick="select" src='3.jpg'/>
<div id='disp'/>
var iarr=["1.jpg","2.jpg","3.jpg"];
function select(){
var random = Math.floor(Math.random() * iarr.length);
var div = document.getElementById('disp');
var image = "<img src=\"" + iarr[random] + "\"/>";
div.innerHTML = image;
}
<html>
<body>
<h4> MAKE A CHOICE </h4>
<img id='x' onclick="select()" src='1.jpg'/>
<img id='y' onclick="select()" src='2.jpg'/>
<img id='z' onclick="select()" src='3.jpg'/>
<div id='disp'/>
Working example: https://jsfiddle.net/pndtdt7t/
var iarr = [
"http://www.wallpapers-for-desktop.com/desktopbilder_for_free/free_desktopbild.jpg",
"http://wikiin.com/media/images/15/04/21/cfe0fdfb23.jpg",
"http://data.whicdn.com/images/89382997/large.jpg"
];
function select() {
var img = "<img src=\""+iarr[Math.floor(Math.random() * iarr.length)]+ "\" />";
document.getElementById('disp').innerHTML = img;
}
<html>
<body>
<h4> MAKE A CHOICE </h3>
<img id='x' onclick="select()" src='1.jpg'/>
<img id='y' onclick="select()" src='2.jpg'/>
<img id='z' onclick="select()" src='3.jpg'/>
<div id='disp'/>
So i have an html document with a running some sample pic.
However I want this data to come from a javascript file? Is this possible?
This is what i have so far:
HTML
<link rel="stylesheet" type="text/css" href="FrontEnd.css"/>
<title> Test script for ticker </title>
</head>
<div class="container">
<body>
<div id="allTop">
<h1>
</h1>
<div class="clearfix">
<div class="forecast">
<div id="pic"></div>
<div id="forecast"></div>
<div id="temp"></div>
</div>
</div>
<div id="ticker">
<marquee>
<img
src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg"
Width=80 Height=80 alt="Milford Sound in New Zealand" />NewZealand
</marquee>
</div>
</div>
<div class="captured">
<div class="graph"></div>
</div>
</body>
</div>
</html>
js function
function buildList(){
var data= [1,2,3,4,5,6,7,8];
var listitems = document.getElementsByTagName('marquee');
for(var i = 0; i <= data.length-1;i++){
var newListItem = data[i] + 'there should be an img coming in from an array here';
listitems.innerHTML = newListItem;
}
}
So I am confused on how can i append data into marquee tags from this function?
Simple append Data not over write
function buildList(){
var data= [1,2,3,4,5,6,7,8];
var listitems = document.getElementsByTagName('marquee');
for(var i = 0; i <= data.length-1;i++){
var newListItem = data[i]; //'<img something /. etc etc
listitems[0].innerHTML += newListItem;
}
}
I have the following html:
<div id="prog" class="downloads clearfix">
<div class="item">
<div class="image_container">
<img src="/img/downloads/company.png" width="168" height="238" alt="">
</div>
<div class="title">
pricelist: <label id="pr1"></label>
</div>
<div class="type">
pdf document
</div>
<div class="link">
<a id="pdfdocument" class="button" target="_blank" href="#">start Download </a>
</div>
</div>
</div>
I want build HTML which is inside the <div id="prog"> with Javascript:
<div id="prog" class="downloads clearfix"></div>
I'm trying to use this Javascript, but without success:
var tmpDocument, tmpAnchorTagPdf, tmpAnchorTagXls, parentContainer, i;
parentContainer = document.getElementById('prog');
for (i = 0; i < documents.length; i++) {
tmpDocument = documents[i];
tmpAnchorTagPdf = document.createElement('a id="pdfdocument" ');
tmpAnchorTagPdf.href = '/role?element=' + contentElement.id + '&handle=' + ope.handle;
tmpAnchorTagPdf.innerHTML = 'start Download';
tmpAnchorTagXls = document.createElement('a');
tmpAnchorTagXls.href = '/role?element=' + contentElement.id + '&handle=' + ope.handle;
tmpAnchorTagXls.innerHTML = 'start Download';
parentContainer.appendChild(tmpAnchorTagPdf);
parentContainer.appendChild(tmpAnchorTagXls);
}
If this is a section of code that you will be using more than once, you could take the following approach.
Here is the original div without the code you want to create:
<div id="prog" class="downloads clearfix">
</div>
Create a template in a hidden div like:
<div id="itemtemplate" style="display: none;">
<div class="item">
<div class="image_container">
<img src="/img/downloads/company.png" width="168" height="238" alt="">
</div>
<div class="title">
pricelist: <label></label>
</div>
<div class="type">
pdf document
</div>
<div class="link">
<a class="button" target="_blank" href="#">start Download </a>
</div>
</div>
</div>
Then duplicate it with jquery (OP originally had a jquery tag; see below for JS), update some HTML in the duplicated div, then add it to the document
function addItem() {
var item = $("#itemtemplate div.item").clone();
//then you can search inside the item
//let's set the id of the "a" back to what it was in your example
item.find("div.link a").attr("id", "pdfdocument");
//...the id of the label
item.find("div.title label").attr("id", "pr1");
//then add the objects to the #prog div
$("#prog").append(item);
}
update
Here is the same addItem() function for this example using pure Javascript:
function JSaddItem() {
//get the template
var template = document.getElementById("itemtemplate");
//get the starting item
var tempitem = template.firstChild;
while(tempitem != null && tempitem.nodeName != "DIV") {
tempitem = tempitem.nextSibling;
}
if (tempitem == null) return;
//clone the item
var item = tempitem.cloneNode(true);
//update the id of the link
var a = item.querySelector(".link > a");
a.id = "pdfdocument";
//update the id of the label
var l = item.querySelector(".title > label");
l.id = "pr1";
//get the prog div
var prog = document.getElementById("prog");
//append the new div
prog.appendChild(item);
}
I put together a JSFiddle with both approaches here.