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`;
});

//add the pics into list
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
});

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.

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">
    <tr class="days" id="header" >
        <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:

Thanks in advance!