Javascript vprašanje

Vse o programiranju na in za PC

Moderatorji: Kroko, tilz0R

Javascript vprašanje

OdgovorNapisal/-a mare69 » 17 Jan 2025, 00:04

V HTML imam en slider, ki določa koliko vnosnih polj in gumbov se pojavi na spletni strani. To delam preko JS in deluje kot mora. Tole je source:

Koda: Izberi vse
t <!DOCTYPE html>
t <html lang="en">
t <head>
t    <meta charset="UTF-8">
t    <meta name="viewport" content="width=device-width, initial-scale=1.0">
t    <title>Calibration</title>
t    <link rel="stylesheet" href="style.css">
t    <script>
t        // JavaScript for handling slider and dynamic calibration point creation
t        function updateCalibrationPoints() {
t            const numPoints = document.getElementById('num_points').value;
t            const pointsContainer = document.getElementById('calibration_points');
t            pointsContainer.innerHTML = ''; // Clear existing points
t            for (let i = 0; i < numPoints; i++) {
t                const pointRow = document.createElement('div');
t                pointRow.classList.add('form-group');
t                pointRow.innerHTML = ' <table><tr>
t                    <td><label for="angle_'+i+'">Angle '+i+':</label>
t                    <input type="number" id="angle_'+i+'" name="angle_'+i+'" min="0" required></td>
t                    <td><label for="adc_'+i+'">ADC:</label>
t                    <input type="number" id="adc_'+i+'" name="adc_'+i+'" disabled></td>
t                    <td><button type="button" onclick="readADC('+i+')" class="button">Read ADC</button></td>
t                </tr></table><hr>';
t                pointsContainer.appendChild(pointRow);
t            }
t        }
t        function readADC(index) {
t            // Simulate ADC reading
t            const adcField = document.getElementById('adc_'+index);
t            adcField.value = Math.floor(Math.random() * 1024); // Random ADC value between 0 and 1023
t        }
t    </script>
t </head>
t <body>
t    <!-- Banner Image -->
t    <header>
t        <img src="banner_s54MTB.png" alt="S54MTB Banner" class="banner">
t    </header>
t    <div class="container">
t        <h1>Calibration</h1>
t        <!-- Step Input and Move Buttons -->
t        <div class="form-group">
t           <table><tr>
t            <td><button type="button" class="button" onclick="moveCCW()">Move CCW</button></td>
t            <td><label for="step">Step:</label>
t            <input type="number" id="step" name="step" required></td>
t            <td><button type="button" class="button" onclick="moveCW()">Move CW</button></td>
t          </tr></table>
t        </div>
t        <!-- Angle Min and Max Inputs -->
t        <div class="form-group">
t            <label for="angle_min">Angle Min:</label>
t            <input type="number" id="angle_min" name="angle_min" min="0" required>
t        </div>
t        <div class="form-group">
t            <label for="angle_max">Angle Max:</label>
t            <input type="number" id="angle_max" name="angle_max" min="0" required>
t        </div>
t        <!-- Calibration Points Slider -->
t        <div class="form-group">
t            <label for="num_points">Number of Calibration Points (2-10):</label>
t            <input type="range" id="num_points" name="num_points" min="2" max="10" value="2"
t               oninput="updateCalibrationPoints()">
t            <span id="num_points_value">2</span>
t        </div>
t        <!-- Calibration Points -->
t        <div id="calibration_points">
t            <!-- Dynamic calibration points will be added here -->
t        </div>
t
t        <!-- Save and Cancel Buttons -->
t        <div class="form-group">
t            <button type="button" class="button">Save Calibration</button>
t            <button type="button" class="button">Cancel without Saving</button>
t        </div>
t    </div>
t    <!-- Footer -->
t    <footer>  <hr>
t        <p>Author: <strong>S54MTB - Marko Pavlin</strong></p>
t        <p>Find me on <a href="https://github.com/s54mtb" target="_blank">GitHub</a> |
t           Check my <a href="https://www.qrz.com/db/S54MTB" target="_blank">QRZ.com</a></p>
t    </footer>
t </body>
t </html>
.


Tisti "t" na začetku so zaradi cgi interpreterja, ker je to na embedded web serverju.

Zdaj pa vprašanje: ob prvem prikazu strani je slider na začetni legi. Dinamičen update strani preko JS je šele ob prvem premiku sliderja. Kako bi naredil, da se že ob prvem prikazu strani izvede updateCalibrationPoints() ?
Priponke
image_2025-01-17_000606931.png
Uporabniški avatar
mare69
 
Prispevkov: 360
Pridružen: 30 Jun 2024, 14:48
Zahvalil se je: 69 krat
Prejel zahvalo: 220 krat
Uporabnika povabil: miharix
Število neizkoriščenih povabil: 108

Re: Javascript vprašanje

OdgovorNapisal/-a Saso » 17 Jan 2025, 06:31

document.addEventListener("DOMContentLoaded", function (){
}

po mojem bi šlo tkole.

Lahko pa uporabiš window.onload = function () {
}

Samo jaz raje uporabljam eventlisener.
_______________
LP
Sašo
Uporabniški avatar
Saso
 
Prispevkov: 1236
Pridružen: 18 Jan 2015, 19:41
Kraj: Trbovlje
Zahvalil se je: 170 krat
Prejel zahvalo: 273 krat
Uporabnika povabil: VolkD
Število neizkoriščenih povabil: 57

Re: Javascript vprašanje

OdgovorNapisal/-a MocnikG » 17 Jan 2025, 14:53

Jaz bi v Html znacki uporabil onload argument.
*Sent*from*my* iPhone.
*Sent*from*my* Linux.
*Sent*from*my* room.
Uporabniški avatar
MocnikG
 
Prispevkov: 611
Pridružen: 18 Maj 2015, 17:56
Kraj: Koroška - MB - CE
Zahvalil se je: 61 krat
Prejel zahvalo: 116 krat
Uporabnika povabil: s55ei
Število neizkoriščenih povabil: 11

Re: Javascript vprašanje

OdgovorNapisal/-a JernejL » 17 Jan 2025, 17:59

Event listener je boljši, saj jih je lahko več.
Uporabniški avatar
JernejL
 
Prispevkov: 1452
Pridružen: 17 Apr 2016, 18:58
Kraj: Maribor
Zahvalil se je: 236 krat
Prejel zahvalo: 450 krat
Uporabnika povabil: gumby
Število neizkoriščenih povabil: 90

Re: Javascript vprašanje

OdgovorNapisal/-a mare69 » 17 Jan 2025, 21:58

Težava je bila v osnovah :) ...

Ko sem dodal
window.onload = updateCalibrationPoints;
kot čisto zadnjo vrstico pred </script> pa deluje in požene funkcijo.

Hvala za pomoč.
Uporabniški avatar
mare69
 
Prispevkov: 360
Pridružen: 30 Jun 2024, 14:48
Zahvalil se je: 69 krat
Prejel zahvalo: 220 krat
Uporabnika povabil: miharix
Število neizkoriščenih povabil: 108


Vrni se na Programski jeziki

Kdo je na strani

Po forumu brska: 0 registriranih uporabnikov in 1 gost