Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am making a web app which is getting data in the form of http url which are of images eg:
let array = ["https://zjcdn.mangafox.me/store/manga/31721/142.0/compressed/m000.jpgtoken=e7bf6b3b8fa25c218502b913a9c722ec374229d6&ttl=1633968000","https://zjcdn.mangafox.me/store/manga/31721/142.0/compressed/m001.jpg?token=3cd1bb77873151a1311e0f87d3cdd68100045326&ttl=1633968000", "https://zjcdn.mangafox.me/store/manga/31721/142.0/compressed/m002.jpg?token=74b31d27c19d32b1abb3db47eeb97a5cb4f381c7&ttl=1633968000","https://zjcdn.mangafox.me/store/manga/31721/142.0/compressed/m003.jpg?token=ff06277b89a5764deccae021411342de9947f130&ttl=1633968000","https://zjcdn.mangafox.me/store/manga/31721/142.0/compressed/m004.jpg?token=a5641dc8ed4d61de17793f94a45e69ab38f5fce3&ttl=1633968000","https://zjcdn.mangafox.me/store/manga/31721/142.0/compressed/m005.jpg?token=659f9f64adad8356006bc939365b492004bedc12&ttl=1633968000","https://zjcdn.mangafox.me/store/manga/31721/142.0/compressed/m006.jpg?token=46641b886d2eef796860c5d29e2959e4cb621945&ttl=1633968000","https://zjcdn.mangafox.me/store/manga/31721/142.0/compressed/m007.jpg?token=6c8ff51fd06f5a0171bde3e3bee2c68606985918&ttl=1633968000"]
and I want to render them on page I have used following code:
`{
arr.map(e=>{
return <img src={`${e}`} alt="" />
})
} `
and this:
arr.map(e=> (<img src={e} alt="" />))
but the problem is it is only rendering one image instead of rendering all images.
I think you have got some issues with your array as it would appear is has some format problems. Here is the fix
{
array.map((el,i )=> <img key={i} src={el} /> )
}
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 17 hours ago.
This post was edited and submitted for review 17 hours ago.
Improve this question
I have them both as HTML files in my repo. The button is just meant to switch from pages for now. I will add the function for the inputs and conditions later. I just want to get in working before I add anything. There are also no errors that or popping up. I cannot use a tag as I need to change the URL to pass data through it, so I need to have it in JS so I can change it with the data from the input.
The plan is to have the user put in their name in a text input, and have it inside the Url, then have the 2nd page process the name and output a text and photo.
This is the code that I have tried.
const nameButton = document.getElementById("nameBtn");
$(nameButton).click(function(){
preventDefault()
function change_page(){
window.location.replace("page-two.html");
};
change_page()
});
This is the Html:
<input class="font" type="text" id="inputName" value="Type in
your name..."></input>
<button class="fonts" id="nameBtn">Ready?</button>
</form>
</div>
</body>
<script src="scripts/script.js"></script>
</html>
Short answer, only replace the pathname
window.location.pathname = 'page-two.html'
In your case:
const nameButton = document.getElementById("nameBtn");
nameButton.addEventListener('click', function (event) {
event.preventDefault()
window.location.pathname = "page-two.html";
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm building a simple app that displays images. The images are in public/uploads. When I copy the path http://localhost:3000/uploads/image.jpg and paste in the URL I can see that image but I can't load it inside the page.
Here is my code:
<img src={product.image && product.image.imagePath} alt={product.image && product.image.imageName}/>
It seems to work fine as in this snippet. Problem may be something else.
const product = { image: { imagePath: "https://via.placeholder.com/150", imageName: "sample"}}
ReactDOM.render(<img src={product.image && product.image.imagePath} alt={product.image && product.image.imageName} />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"> </div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
Need a jQuery solution of a JavaScript code and more shorter than it is.
Code:
if (event.target.parentElement.parentElement.parentElement.parentElement.getAttribute("class").include("newSearch"))
where event is coming from,
$(document).on('click', '#divCl > #lnkCl', function (event) {
JQuery version : 2.2.4
HTML Code:
<div class"newSearch">
<div>
<div>
<div>
<div id="divCl">
<div id="lnkCl">
</div>
</div>
</div>
</div>
</div>
</div>
This is not the exact code, as we have different use for the divs in between.
Maybe something like this.
$(document).on('click', '#divCl > #lnkCl', function(event) {
if ($(this).parents(".newSearch").length) {
// do your thing
}
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I want to get all full element using class
<div class="number">one</div>
<div class="address">addr1</div>
<div class="number">twod</div>
I want what are all the div having class name number, I want output full content with tags one by one using foreach statement. The expected output is like below
<div class="number">one</div>
<div class="number">two</div>
$('.number, .address').each(function() {
console.log(this.outerHTML)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="number">one</div>
<div class="address">addr1</div>
<div class="number">twod</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have two page page1.php, page2.php and one JS file Control.js.
In page1.php
HTML :
<img src="images/b.jpg" width="31" height="26" id="imgClick1" onClick="return changeImage1(this)" >
In Control.js
function changeImage1() {
document.getElementById("imgClick1").src = "images/b.jpg";
document.getElementById('num1').style.color = "#fff";
document.getElementById("text1").innerHTML = "Hello friend";
}
In page2.php
<div id="text1">
Hello world
</div>
So using JavaScript I am trying to write "hello friend" in the div "text1" of page page2.php when I click the image or the div of page1.php.
Is there any possible way to use JS to solve this problem?
Can we use any how document.getElementById("text1").innerHTML or something like that in the program?
I suggest you make use of the include function of php (provided you absolutely want to keep your text1 div on a separate page), like this on your page1.php file:
include('page2.php');
Make sure that when you do that, page1.php and page2.php are in the same folder, otherwise you may define a path to it like this:
include('/path/to/page2.php');