Javascript toepassen om hidden button zichtbaar te maken

Vraag

donderdag 10 november 2022 13:42

Acties:

0 Henk 'm!

Ralfefernandes

Topicstarter

Hi Tweakers,

Ik heb mijn knopje op hidden gezet middels CSS toe te passen. Zie code hieronder:

code:

1
2
3

.objectlayout_element_exportPdf {
    visibility:hidden;
}

Als ik deze hidden knopje wil toch zichtbaar maken middels JS, dan doet het niet. Zie code:

code:

(function () {
    const collection = document.getElementsByClassName("objectlayout_element_exportPdf");
    collection[0].style.visibility = "visible";
})

Graag wil ik advies hoe je effecient javascript kan gebruiken om hidden objecten zichtbaar te maken.

Alle reacties

donderdag 10 november 2022 13:45

Acties:

0 Henk 'm!

DonJunior

En als je deze toevoegt aan je javascript CSS modificatie?
https://www.w3schools.com/css/css_important.asp

*sowieso

donderdag 10 november 2022 13:52

Acties:

0 Henk 'm!

com2,1ghz

Jouw code zou moeten werken:
https://jsfiddle.net/bjxfnqm7/

donderdag 10 november 2022 13:53

Acties:

0 Henk 'm!

ThinkCreative

Yes.

Wordt de code wel aangeroepen?

Met enkel het stukje wat in de TS staat roep je de function namelijk nooit aan.
Kun je eens een minimum reproducible example delen?

donderdag 10 november 2022 13:53

Acties:

0 Henk 'm!

Christoxz

Ralfefernandes schreef op donderdag 10 november 2022 @ 13:42:
Hi Tweakers,

Ik heb mijn knopje op hidden gezet middels CSS toe te passen. Zie code hieronder:

Als ik deze hidden knopje wil toch zichtbaar maken middels JS, dan doet het niet. Zie code:
code:
1
2
3
4
(function () {
    const collection = document.getElementsByClassName("objectlayout_element_exportPdf");
    collection[0].style.visibility = "visible";
})

Je sluit je function block niet goed af.

code:

(function(){
  
    const collection = document.getElementsByClassName("objectlayout_element_exportPdf");
    collection[0].style.visibility = "visible";

})();

https://jsfiddle.net/qk5nf2ez/

T.Net Creality 3D Printer Discord

donderdag 10 november 2022 13:53

Acties:

+2 Henk 'm!

CyBeR

💩

Je doet dat goed maar je moet wel zorgen dat die getElementsByClassName() pas aangeroepen wordt nadat dat element op de pagina is gezet.

Dit werkt:

HTML:

<html>
<head>
<style>
.objectlayout_element_exportPdf {
    visibility: hidden;
}
</style>

</head>
<body>
<button class="objectlayout_element_exportPdf">Knop</button>
<script type="text/javascript">

(function() {
    const collection = document.getElementsByClassName("objectlayout_element_exportPdf");
    collection[0].style.visibility = "visible";
})();

</script>
</body>
</html>

Maar dit niet:

HTML:

<html>
<head>
<style>
.objectlayout_element_exportPdf {
    visibility: hidden;
}
</style>

<script type="text/javascript">

(function() {
    const collection = document.getElementsByClassName("objectlayout_element_exportPdf");
    collection[0].style.visibility = "visible";
})();
</script>
</head>
<body>
<button class="objectlayout_element_exportPdf">Knop</button>
</body>
</html>

Omdat het script al wordt uitgevoerd vóórdat die knop op de pagina staat.

[ Voor 32% gewijzigd door CyBeR op 10-11-2022 13:54 ]

All my posts are provided as-is. They come with NO WARRANTY at all.

donderdag 10 november 2022 15:42

Acties:

0 Henk 'm!

Ralfefernandes

Topicstarter

Deze code

code:

1 2	const collection = document.getElementsByClassName("x-fieldset objectlayout_element_exportPdf"); collection[0].style.visibility = "visible";

en deze

code:

1
2
3

.objectlayout_element_exportPdf{
    visibility:hidden;
}

doen inmiddels goed.

Maar als ik hier zet, dan doet het niet meer,

code:

(function () {


    var id = this.object.data.general.o_id;
    var materials50pctinformation = this.object.data.data.materials50pctinformation;
    let beantwoorden

    if ((id == null || 
        id == underfined || 
        id.length == 0)) {
        console.log(beantwoorden = 'Something went wrong during Download the Pdf Sustainability!');
    }
    else if((materials50pctinformation == null ||
        materials50pctinformation == underfined ||
        materials50pctinformation.length == 0)) {
        console.log(beantwoorden = "Something went wrong during Download the Pdf Sustainability!");
    }

    else {
        var materials50pctinformation = this.object.data.data.materials50pctinformation.id;
    

    const collection = document.getElementsByClassName("x-fieldset objectlayout_element_exportPdf");
    collection[0].style.visibility = "visible";

Ext.Ajax.request({
        url: "development/exportpdf" + this.object.data.general.o_id,
        success: function (response) {
             alert(response.responseText);
            console.log(response);
        }
    });
}
})

[ Voor 56% gewijzigd door Ralfefernandes op 10-11-2022 15:43 ]

donderdag 10 november 2022 22:13

Acties:

0 Henk 'm!

Gdzr

Je roept die functie toch ook nergens aan? Wat probeer je precies te doen? Wanneer je geen ID hebt, console log je een foutmelding. Wanneer je geen materials50pct hebt console log je en anders voer je de api call uit. Imo is het logischer om in de if je call uit te voeren, wanneer je voldoet aan het hebben van een id en m50pct, anders de console log.

Heb je een knop oid waarin je die functie aanroept?

6.8 kWp op zuid en west

vrijdag 11 november 2022 16:49

Acties:

0 Henk 'm!

Ralfefernandes

Topicstarter

Gdzr schreef op donderdag 10 november 2022 @ 22:13:
Je roept die functie toch ook nergens aan? Wat probeer je precies te doen? Wanneer je geen ID hebt, console log je een foutmelding. Wanneer je geen materials50pct hebt console log je en anders voer je de api call uit. Imo is het logischer om in de if je call uit te voeren, wanneer je voldoet aan het hebben van een id en m50pct, anders de console log.

Heb je een knop oid waarin je die functie aanroept?

Wat ik eigenlijk wil doen, is dat het knopje mag zichtbaar zijn, pas als alle fielden een value heeft.

vrijdag 11 november 2022 16:50

Acties:

0 Henk 'm!

Ralfefernandes

Topicstarter

Ik ben ook benieuwd wat ik hier verkeerd doe:

Want hij doet niet wat ik wil

https://jsfiddle.net/Ralfefernandes/s1uch8d4/6/

vrijdag 11 november 2022 16:56

Acties:

0 Henk 'm!

DonJunior

Ralfefernandes schreef op vrijdag 11 november 2022 @ 16:50:
Ik ben ook benieuwd wat ik hier verkeerd doe:

Want hij doet niet wat ik wil

https://jsfiddle.net/Ralfefernandes/s1uch8d4/6/

Check de console rechtsonderin je Fidlle
Daar krijg je de foutmelding:

code:

1	"<a class='gotoLine' href='#46:17'>46:17</a> Uncaught SyntaxError: Unexpected token ')'"

Welke verwijst naar regel 4 van je JS

code:

1	if(true == )

if true ..is wat ??

*sowieso

vrijdag 11 november 2022 17:02

Acties:

0 Henk 'm!

Ralfefernandes

Topicstarter

DonJunior schreef op vrijdag 11 november 2022 @ 16:56:
[...]

Check de console rechtsonderin je Fidlle
Daar krijg je de foutmelding:
code:
1
"<a class='gotoLine' href='#46:17'>46:17</a> Uncaught SyntaxError: Unexpected token ')'"
Welke verwijst naar regel 4 van je JS
code:
1
     if(true == )
if true ..is wat ??

Inmiddels aangepast, maar helaas nog niet opgelost

vrijdag 11 november 2022 18:37

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Javascript

Ralfefernandes schreef op vrijdag 11 november 2022 @ 17:02:
Inmiddels aangepast, maar helaas nog niet opgelost

Niet om heel gemeen te doen, maar we zitten hier niet om handjes vast te houden; geef op z'n minst aan wat er dan (na je aanpassingen) nog niet werkt, wat de (nieuwe) foutmeldingen zijn, wat je hebt geprobeerd etc.

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Pagina: 1

Reageer

Onderwerpen

Vraag

Alle reacties