html: Bildaufruf mit variablen-wert als teil der Dateiname (indirekte Adressierung)

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

timmertechnik

Neues Mitglied
12 Juni 2018
3
0
1
Ibbenbüren
timmertechnik.de
#1
Moin Experten,

kann mir jemand eine(n) Lösung(sansatz) geben wie ich der wert eine Variable in der Dateiname "einbau"?

Das anzeigen klappt wunderbar mit:

<div id="VarId1">VALUE1</div>


Nun soll ich ein Bild abhängig vom Variablenwert Anzeigen, anstelle des X soll der wert aus der Variable eingefügt werden:

<img src='Start-Dateien/1000X'.png' width="563" height="215">

damit am ende 10000.png, 10001.png, 10002.png oder 10004.png angezeigt wird.


Ich probiere und Google jetzt schon seit 2 Tage, habe aber noch keine Lösung gefunden die Variable über seine id auf zu rufen und ein zu fügen o.ä.

Vielen Dank
 

basti1012

Aktives Mitglied
26 November 2017
599
52
28
37
#2
meinst du das so
HTML:
<body>
  <div id="var1">homer</div>
  <div id="aus"></div>
<script>
 wert=document.getElementById('var1').innerHTML;
document.getElementById('aus').innerHTML='<img src="http://sebastian1012.bplaced.net/bilder/'+wert+'.jpeg">';
  </script>
</body>
 

timmertechnik

Neues Mitglied
12 Juni 2018
3
0
1
Ibbenbüren
timmertechnik.de
#3
leider nein, von der Variable der auf eine andere Seite definiert wird
HTML:
<body onload="mainJavaScript()">
        
        <table id="singleVariablesTable" border="1">
            <tr>
                <td>
                    Variablenwert
                </td>
                <td>
                    ID
                </td>
                <td>
                    Variable
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."10000":
                </td>
                <td>
                    VarId1
                </td>
                <td>
                    DB_Anlagenstatus.10000
                </td>
            </tr>
        </table>

    </body>
soll der wert ein TEIL der angezeigter Dateiname werden. :="DB_Anlagenstatus".10000": ist ein wert der aus eine SPS gelesen wird

Dieser Wert kann ich Anzeigen:
HTML:
Wert der erste Variable (in DIV-element): <div id="VarId1">VALUE1</div>
aber dieser wert soll das X erseten damit ich das richtige Bild Anzeige:
HTML:
<body>
    
    <!-- Modul 10000 -->
    <div>
    <span style='position:absolute;left:234px;top:825px'>
    <img src='Start-Dateien/1000X.png' width="563" height="215">
    </div>
</body>
 

basti1012

Aktives Mitglied
26 November 2017
599
52
28
37
#4
Ehrlich gesagt verstehe ich es trotzdem nicht ,ich komme trotzdem noch auf das Script in post2 .Statt homer steht dann da dein Wert
DB_Anlagenstatus.10000.

Warten wir mal ab bis einer kommt der ausgeschlafener ist als ich,ich scheckes heute wohl nicht mehr.
 

Aaron3219

Aktives Mitglied
6 Oktober 2015
846
175
43
17
#5
Und ich auch...

Was basti mach ist, er ließt den Text aus dem div aus und setzt ihn als Variable. In dem div mit der ID 'aus', gibt er dann das Bild aus.
Ein wenig 'sauberer' geschrieben, sieht der Code so aus.

HTML:
<body>
  <div id="var1">Variable_aus_Datei</div>
  <img id="aus" src="" alt="">
  <script>
       wert=document.getElementById('var1').innerHTML;
       document.getElementById('aus').setAttribute('src', 'Start-Dateien/1000'+wert+'.png');
  </script>
</body>
Was also soll jetzt falsch daran sein?
http://jsfiddle.net/bk26ta5o/

Schau es dir selbst an. Wenn du dir das src des img-Tags anschaust, ist es genau das, was du willst!
 

timmertechnik

Neues Mitglied
12 Juni 2018
3
0
1
Ibbenbüren
timmertechnik.de
#6
Es klappt nicht. Ich Poste mal meine ganze Code, erst mal die Seite die Fertig ist und Funktioniert. Die Seite sammelt und aktualisiert die Daten aus der SPS und stellt Sie in eine Tabelle dar:

HTML:
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
        <title>- Automatic update - Update page</title>
        <script type="text/javascript">
         /* String.trim() is not supported by every browser - thus add this functionality is necessary */
         if (!String.trim)
         {
            String.prototype.trim = function () { return this.replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, ''); };
         }
       
         /* Main function for calling the subroutines */
         function mainJavaScript()
         {
            updateSingleVariablesTable();
         }
           
         /* Function for updating the variables */
         function updateSingleVariablesTable()
         {
            var table = document.getElementById("singleVariablesTable");
            for(i = 1; i < table.rows.length; i++)
            {
                var tagValue = table.rows[i].getElementsByTagName("td")[0].innerHTML;
                var tagId = table.rows[i].getElementsByTagName("td")[1].innerHTML.trim();
                parent.document.getElementById(tagId).innerHTML = tagValue;
            }
         }
       
         setInterval("document.location.reload()",1000);
        </script>
    </head>
   
    <body onload="mainJavaScript()">
       
        <table id="singleVariablesTable" border="1">
            <tr>
                <td>
                    Variablenwert
                </td>
                <td>
                    ID
                </td>
                <td>
                    Variable
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."10000":
                </td>
                <td>
                    VarId1
                </td>
                <td>
                    DB_Anlagenstatus.10000
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."20000":
                </td>
                <td>
                    VarId2
                </td>
                <td>
                    DB_Anlagenstatus.20000
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."30000":
                </td>
                <td>
                    VarId3
                </td>
                <td>
                    DB_Anlagenstatus.30000
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."40000":
                </td>
                <td>
                    VarId4
                </td>
                <td>
                    DB_Anlagenstatus.40000
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."50000":
                </td>
                <td>
                    VarId5
                </td>
                <td>
                    DB_Anlagenstatus.50000
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."60000":
                </td>
                <td>
                    VarId6
                </td>
                <td>
                    DB_Anlagenstatus.60000
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."90000":
                </td>
                <td>
                    VarId7
                </td>
                <td>
                    DB_Anlagenstatus.90000
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."100000":
                </td>
                <td>
                    VarId8
                </td>
                <td>
                    DB_Anlagenstatus.100000
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."Engmatec_1":
                </td>
                <td>
                    VarId9
                </td>
                <td>
                    DB_Anlagenstatus.Engmatec_1
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."Engmatec_2":
                </td>
                <td>
                    VarId10
                </td>
                <td>
                    DB_Anlagenstatus.Engmatec_2
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."Engmatec_3":
                </td>
                <td>
                    VarId11
                </td>
                <td>
                    DB_Anlagenstatus.Engmatec_3
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."Reserve_1":
                </td>
                <td>
                    VarId12
                </td>
                <td>
                    DB_Anlagenstatus.Reserve_1
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."Reserve_2":
                </td>
                <td>
                    VarId13
                </td>
                <td>
                    DB_Anlagenstatus.Reserve_2
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."Reserve_3":
                </td>
                <td>
                    VarId14
                </td>
                <td>
                    DB_Anlagenstatus.Reserve_3
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."Reserve_4":
                </td>
                <td>
                    VarId15
                </td>
                <td>
                    DB_Anlagenstatus.Reserve_4
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."Reserve_5":
                </td>
                <td>
                    VarId16
                </td>
                <td>
                    DB_Anlagenstatus.Reserve_5
                </td>
            </tr>
        </table>

    </body>
</html>
Jetzt muss ich mit diesen Daten die verschieden Anlagenzustände mit verschiedene Bilder darstellen. Dazu gibt es für jedes Anlagenteil Bilder die sich nur in der letzte ziffer unterscheiden. Ich bekomme mit der unterstehende Code aber kein Bild angezeigt für 10000. Bei den anderen ist das Bild da, weil ich die Daten direkt aus der SPS hole. Ich muss diesen Umweg gehen weil sonst beim Aktualisieren das Bild ständig flackert.

HTML:
<html>

<!-- Kopf -->
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
   
    <meta name=Originator content="timmertechnik GmbH">
   
    <title>DAI MARS KEY Anlagenstatus</title>
       
</head>

<!-- Hintergrund und text -->
<div>
    <!-- Überschrift -->
    <br>
    <br>
    <h1>
        <center>
            <font face="Arial">
                <span style="font-size: 72px; margin: 100px 0;"><strong>Anlagenstatus</strong></span>
            </font>
        </center>
    </h1>

    <!-- Logo -->
    <span style='position:absolute;left:1725px;top:25px;width:105px;height:120px'>
        <img width=105 height=120 src="Start-Dateien/Logo.jpg"
    </span>

    <!-- Layout -->
    </span>
        <img src="Start-Dateien/Layout.jpg" width="1925" height="986">
    </span>
</div>

<!-- Anlagenteile -->
<body>
   
    <!-- Modul 10000 -->
    <div>
    <span style='position:absolute;left:234px;top:825px'>
    <img id="aus" src="" alt="klappt nicht" width="563" height="215">
        <script>
            wert=document.getElementById('VarId1').innerHTML;
            document.getElementById('aus').setAttribute('src', 'Start-Dateien/1000'+wert+'.png');
        </script>
    </div>

    <!-- Modul 20000 -->
    <div>
    <span style='position:absolute;left:234px;top:616px'>
    <img src='Start-Dateien/2000:="DB_Anlagenstatus"."20000":.png' width="561" height="216">
    </div>

    <!-- Modul 30000 -->
    <div>
    <span style='position:absolute;left:760px;top:663px'>
    <img src='Start-Dateien/3000:="DB_Anlagenstatus"."30000":.png' width="348" height="168">
    </div>

    <!-- Modul 40000 -->
    <div>
    <span style='position:absolute;left:1100px;top:548px'>
    <img src='Start-Dateien/4000:="DB_Anlagenstatus"."40000":.png' width="556" height="284">
    </div>

    <!-- Modul 50000 -->
    <div>
    <span style='position:absolute;left:778px;top:825px'>
    <img src='Start-Dateien/5000:="DB_Anlagenstatus"."50000":.png' width="448" height="250">
    </div>

    <!-- Modul 60000 -->
    <div>
    <span style='position:absolute;left:1219px;top:825px'>
    <img src='Start-Dateien/6000:="DB_Anlagenstatus"."60000":.png' width="439" height="245">
    </div>

    <!-- Modul 90000 -->
    <div>
    <span style='position:absolute;left:62px;top:478px'>
    <img src='Start-Dateien/9000:="DB_Anlagenstatus"."90000":.png' width="180" height="403">
    </div>

    <!-- Modul 100000 -->
    <div>
    <span style='position:absolute;left:300px;top:450px'>
    <img src='Start-Dateien/10000:="DB_Anlagenstatus"."100000":.png' width="281" height="107">
    </div>
       
    <iframe src="Update_Page.html" style="display:none;" />
</body>

</html>
Ich bin kein Profi und kenne mich nicht aus, trotzdem muss ich es zum laufen bekommen. Bin für jede Hilfe sehr Dankbar!
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.128
239
63
65
#7
Code:
               <td>
                    :="DB_Anlagenstatus"."10000":
                </td>
:="DB_Anlagenstatus".10000": ist ein wert der aus eine SPS gelesen wird
Wie gelangt dieser Wert denn in das HTML? Da muss es doch noch mehr geben als reines HTML?
Aber ohne das zu verstehen, könnte es so funktieren:
Code:
<span id="thevalue" style="display:none;">:="DB_Anlagenstatus"."10000":</span>

<img id="theimg"  width="563" height="215">
<script>
var theval = document.getElementById("thevalue").textContent;
document.getElementById("theimg").src = 'Start-Dateien/1000' + theval + '.png';
</script>
 

basti1012

Aktives Mitglied
26 November 2017
599
52
28
37
#8
Fals der Code von @Sempervivum auch nicht klappt dann probier mal das.
den Code von sempervivum und änder nur die eine Zeile
Code:
<script>
var theval = document.getElementById("VarId1").innerHTML.trim();
document.getElementById("theimg").src = 'Start-Dateien/1000' + theval + '.png';
</script>
Ich habe deine Scripte mal ausprobiert und es werden die Zeilenumbrüche mit ausgegeben bzw du hast einfach 2 Leerzeilen damit drinne . Mit trim() gehen die weg.
Hier die pen dazu https://codepen.io/basti1012/pen/MXmypQ?editors=1010

Zum testen habe ich mein homer Bild genommen ,Was ohne trim() auch nicht lief.
Vieleicht läst sich im Code noch was besseres finden als trim(),aber das können die beiden besser sagen als ich ob es da was gibt.
 
Zuletzt bearbeitet: