Nov 20, 2022

# Solution 1 :

You can add the values by innerHtml and querySelectors:

``````
//get all children of max temperature div and add some html into
document.querySelector("#maNum").children.map( (element) => {
element.innerHTML = `\${randomMax()}&deg`;
});

//get all children of min temperature div and add some html into
document.querySelector("#mNum").children.map( (element) => {
element.innerHTML = `\${randomMin()}&deg`;
});

const picsList = [
'<img src="picto/rain%20(1).png" alt="regen" height="40">',
'<img src="picto/rainsun.png" alt="regen" height="40">',
'<img src="picto/cloudy.png" alt="wolk" height="40">',
'<img src="picto/sun.png" alt="zon" height="40">'
];

//add random image html to elements on pics
document.querySelector("#pics").children.map( (element) => {
element.innerHTML = picsList[Math.floor(Math.random() * picsList.length];//ramdom index of array
});
``````

# Solution 2 :

The code I used to get random numbers in my table for the temprature:

``````function randomMax(){
var min = 9;
var max = 21;
return Math.floor(Math.random() * (+max - +min)) + +min;
}

document.getElementById('n5').innerHTML = randomMax() + '&deg';
document.getElementById('n6').innerHTML = randomMax() + '&deg';
document.getElementById('n7').innerHTML = randomMax() + '&deg';
document.getElementById('n8').innerHTML = randomMax() + '&deg';

function randomMin(){
var min = -6;
var max = 8;
return Math.floor(Math.random() * (+max - +min)) + +min;
}

document.getElementById('n1').innerHTML = randomMin() + '&deg';
document.getElementById('n2').innerHTML = randomMin() + '&deg';
document.getElementById('n3').innerHTML = randomMin() + '&deg';
document.getElementById('n4').innerHTML = randomMin() + '&deg';
``````

This code got me random numbers in all of the table boxes where it was needed, I got every box with a different ID, when refreshing the page the value changes.

The code I used to get random images in my table:

``````var picsList = [
'picto/rain%20(1).png',
'picto/rainsun.png',
'picto/cloudy.png',
'picto/sun.png'
];

function randImg() {
const size = picsList.length;
document.getElementById('i1').src = picsList[Math.floor(size * Math.random())];
document.getElementById('i2').src = picsList[Math.floor(size * Math.random())];
document.getElementById('i3').src = picsList[Math.floor(size * Math.random())];
document.getElementById('i4').src = picsList[Math.floor(size * Math.random())];

}

randImg()
``````

This code worked for me, I get each table box by id and then give them a random image for the list. So all 4 images in the table are different.

# Problem :

I’m making a simple weather site using HTML CSS and Javascript.
I’ve searched a lot of different questions but i can’t figure out how to create 2 things.

1. For the temprature rows in my table I want to generate and insert random numbers for the temprature on each refresh of the page. id’s “mNum” and “maNum”.

2. On each page refresh I want to randomly show the weather picto’s.

I want to do this both using Javascript, but I just can’t find and figure out how to do that.

If someone could point me in the right direction that would be great! Thanks in advance.

My Table in HTML:

``````<table class="week" id="weer">
<th class="r1">Vandaag</th>
<th class ="r2">Morgen</th>
<th class = "r3">Overmorgen</th>
<th class="r4">Daarna</th>
</tr>
<tr class="picto" id="pics">
<td class="r1"><img src="picto/rain%20(1).png" alt="regen" height="40"></td>
<td class="r2"><img src="picto/rainsun.png" alt="regen" height="40"></td>
<td class="r3"><img src="picto/cloudy.png" alt="wolk" height="40"></td>
<td class="r4"><img src="picto/sun.png" alt="zon" height="40"></td>
</tr>
<tr class="min" id="mTemp">
<td class="r1">Min. Temperatuur</td>
<td class="r2">Min. Temperatuur</td>
<td class="r3">Min. Temperatuur</td>
<td class="r4">Min. Temperatuur</td>
</tr>
<tr class="mintemp" id="mNum">
<td class="r1">5&deg</td>
<td class="r2">7&deg</td>
<td class="r3">9&deg</td>
<td class="r4">11&deg</td>
</tr>
<tr class="max" id="maTemp">
<td class="r1" >Max. Temperatuur</td>
<td class="r2">Max. Temperatuur</td>
<td class="r3">Max. Temperatuur</td>
<td class="r4">Max. Temperatuur</td>
</tr>
<tr class="maxtemp" id="maNum">
<td class="r1">16&deg</td>
<td class="r2">19&deg</td>
<td class="r3">21&deg</td>
<td class="r4">25&deg</td>
</tr>
<tr class="wind" id="wind">
<td colspan="4">Wind is niet van toepassing deze week</td>

</tr>

</table>
``````

My only javascript so far to generate the random numbers for minimum temp and maximum temp.

``````function randomMax(){
var min = 9;
var max = 21;
return Math.floor(Math.random() * (+max - +min)) + +min;
}

function randomMin(){
var min = -6;
var max = 8;
return Math.floor(Math.random() * (+max - +min)) + +min;
}
``````

A picture of how my weather table looks like:

### Comment posted by Ronny Giezen

Thanks!, but how do I write this in my file. Do I just put this piece of code in my section in my HTML file?. And do I need to change anything in my table?

### Comment posted by Rafael Barbosa

To run it, you just need to add a

### Comment posted by Ronny Giezen

Alright thanks, now I get the message in my ide “unresolved function or method map()”

### Comment posted by Rafael Barbosa

That’s because your navigator don’t support new versions of JavaScript.