This question already has answers here:
How to add a list of images to the document from an array of URLs?
(2 answers)
Closed 7 years ago.
I've asked this question already but I haven't been able to get many answers. I'll try and be more clear with this one!
I have an array which I am randomizing using math.random. I am displaying this array in the browser, each time the page refreshes it randomizes and outputs a different array item. Each array item contains a title and description which works, but I am also trying to add an image. I want this image to be displayed in the browser.
JavaScript:
var myArray = [
{title: "my title", description: "my description", image: "file path"},
];
function getArray(ary){
return ary[Math.floor(Math.random()*ary.length)];
}
var random = getArray(action);
and then in my HTML I have a <script> tag to display each portion of the item to the browser,
document.write(random.title);
document.write(random.description);
document.write(random.image);
The problem is, the image doesn't show up it only displays the actual file path in text. How am I able to display the actual image?
You are to place the html for the image, this way:
document.write('<img src="'+random.image+'" width="203" height="350" />');
Otherwise your random.image only shows the output of the array, which is text with "file path" written in it.
If you want to create the images dinamically, a possible way is the following:
var x = document.createElement("IMG");
x.setAttribute("src", "file.jpg");
document.body.appendChild(x);
Make it valid HTML. Like <img src="path">
And this is some random text because the answer was too short.
Related
This question already has answers here:
Iterating over result of getElementsByClassName using Array.forEach
(14 answers)
Closed 7 months ago.
I have below div tag from material UI which is getting autogenerated through MUI -
<div class="MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault">Some Text</div>
Through javascript , I am fetching this element as -
var ele=document.getElementsByClassName("MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault");
console.log(ele);
In console log I am able to see element with all its properties including innerHTML as Some Text
When I am trying to change the InnerHTML by -
ele[0].innerHTML="Changed Text" , I am not able to see that text got changed.
Also , before this , when I try to log innerHTML -
console.log(ele[0].innerHTML) , I am getting blank result.
How can I change the inner HTML from HTML Collection I am fetching ?
You have missed two things:
Typo in getElementsByClassName -> should be getElementByClassName
If you put spaces in your class name inside getElementsByClassName like MuiAvatar-root MuiAvatar-circular, its not correct.
var ele = document.getElementsByClassName("MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault");
ele[0].innerHTML = "TEST"
<div class="MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault">Some Text</div>
I need to verify a web page about a sportsperson, and I need to check if the sportsperson name displays on web page correctly. For instance, "Sir Andrew Barron Murray" is the name I need to check throughout the web page and the name should get display in each and every instance in a single line. It should not display like, Sir Andrew in one line and Barron Murray in the second line. The entire name has to display in a single line.
I tried with a body of the text and checked the IndexOf each letter, but didn't work out. The other solution I could think of is getting the exact coordinates of each word in a string and compare to each other. But I am not sure how to get the coordinates of text in a web-element. I understand that we can use getLocation, but this would get the web-element location but not the exact text within a web-element.
Using XPath
//*[contains(text(), 'your text you are searching for')]
If the text is on the page it will find it
In JS you could fill the Element with a character like 'a' via element.innerHTML, then get its height with element.getBoundingClientRect().height.
Then you insert the name back into the element and do the same again. You'll find that the second height is a multiple of the first one.
var text = element.innerHTML;
var one_line_height = element.getBoundingClientRect().height;
element.innerHTML = text;
var current_height = element.getBoundingClientRect().height; // must be recalled
console.log("Ratio: "+(current_height/one_line_height));
// should output 1 if the two are matching or 2, if its two lines
Edit: If the name is inside a text, wrap the name inside a div-wrapper with display: inline; and redo the calculation on the div element. That's because inline-elements break at a line-break.
I am trying to use this API to run an iteration over some Google Documents. However, I have very little experience concerning Javascript. How would I replace a keyword, say <"image">, with an actual inline image from a URL? Does ChildIndex support indexes within a paragraph? Bonus points for code!
If you want to add an actual inline image from a URL, try this:
var img_name_Url = "URL of the image";
var img_name_Blob = UrlFetchApp.fetch(img_name).getBlob().setName("img_name_Blob");
In the document you want to use it in:
htmlBody : "The content for the inline image <img src='cid:img_name'>",
inlineImages:
{
img: img_name_Blob
}
This question already has answers here:
Trim string in JavaScript
(20 answers)
Closed 9 years ago.
In my website, I have title that is kind of like this:
<title>Current Title → Sub Title → My Site</title>
I want to display the Sub Title part of the title in some of my html elements... so I wrote this JavaScript code to print the title, but only the text in between the 1st and 2nd →
"<script>document.write(document.title.split("\u2192")[1]);</script>"
But that code outputs " Sub Title " with a space in front and behind it. Do you know how I can somehow delete the 2 spaces using javascript (without changing the title) to output something like this: "Sub Title"?
Thanks!
Try using JQuery trim over the one you have used already
http://api.jquery.com/jQuery.trim/
like this:
<script type="text/javascript">
var titlePart = document.title.split("\u2192")[1];
document.write($.trim(titlePart));
</script>
or if you want to stick to javascript, try using this...
<script type="text/javascript">
var titlePart = document.title.split("\u2192")[1];
document.write(titlePart.replace(/^\s+|\s+$/g, ''));
</script>
I have created a button(new_a_window), as it is pressed, it will append a button with an image in the html.
$( '#new_a_window').bind('click',function(){
$('#story_pages').append('<div><button value="'+window_value+'" onclick="reload_to_canvas(this.value) " ><img id= "w'+window_value+'" src="../pic/white_img.png" width="100px", height="100px"/> </button></div>');
window_value= window_value+1;
});
And when each new button is clicked, it will send its value to a function:
var write_back_to_canvas;
function reload_to_canvas(dataURLindex){
write_back_to_canvas = new Image(); //to new a object each time.
alert(dataURLindex);//check the dataURLindex content.
current_page=dataURLindex;
write_back_to_canvas.src= img_dataURLs[dataURLindex];
context.drawImage(write_back_to_canvas,0,0);
}
The problem is that: This won't work.(redraw the dataURL's image to the canvas) After many tests, I
find the problem is not the drawImage method about the canvas.
It's the problem of dataURLindex.
Since I have tried to replace the argument dataURLindex to
integer numbers like:0, 1, 2 or 3... And this work.
But as I use the variable(dataURLindex) as the index, it becomes invalid again.
What is strange is that as I alert(img_dataURLs[dataURLindex])
I can see the content... And alert(dataURLindex) display the correct number...
I really can't find another possible faults. Please any suggestions.