Frage Kann Javascript html Code durch Klick auf eine Checkbox schreiben?

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

Matthias

Mitglied
15 April 2017
98
0
6
31
Hallo,

aus meinem vorherigen Thread ist folgender Code hervorgegangen:

CSS:
#div2 {
  display: none;
}
Code:
<input type="checkbox" id="myCheck" onclick="myFunction()" checked />
<p id="text" style="display:none">Checkbox is CHECKED!</p>
<div id="div1">
  <p>Text1</p>
</div>
<div id="div2">
  <p>Text2.</p>
</div>

<script>
  function myFunction() {
    // Get the checkbox
    var checkBox = document.getElementById("myCheck");
    // Get the output text
    var text = document.getElementById("div1");
    var text2 = document.getElementById("div2");

    // If the checkbox is checked, display the output text
    if (checkBox.checked == true){
      text.style.display = "block";
      text2.style.display = "none";
    } else {

      text.style.display = "none";
      text2.style.display = "block";
    }
  }
</script>
Statt <p>Text1</p> und <p>Text2.</p> soll in id="div1" und id="div2" ein Button Code, den ich von einer externen Webseite einbinde.
Leider verhindert die externe Webseite die Möglichkeit, den Button Code zweimal auf der gleichen Seite anzuzeigen. Wird der Button Code zweimal eingefügt, wird er nur einmal angezeigt.

Meine spontane Idee war, dies zu umgehen, indem ein Programm den Code erst schreibt, sobald die Checkbox geklickt wurde und den anderen löscht.
Dies im Wechsel

Ist so etwas prinzipiell möglich und wenn ja, wie kann das (möglichst einfach) gemacht werden? Oder gibt es eine andere Alternative?

Danke
 

Matthias

Mitglied
15 April 2017
98
0
6
31
Da bin ich überfragt.

Ich gebe mal etwas mehr über mein Vorhaben bekannt. Vielleicht hilft das.

Ich baue für einen kleinen Webshop eine Checkout-Seite.

Der Kunde hat die Möglichkeit mittels Checkbox ein Add-On dazuzubestellen.

Je nachdem ob die Checkbox geklickt ist oder nicht, muss ein anderen PayPal Button-Code angezeigt werden, damit der Preis übereinstimmt. PayPal ermöglich aber nur einen Button-Code pro Seite.

Der Button Code hat folgende Struktur:


Code:
 <script
    src="https://www.paypal.com/sdk/js?client-id=SB_CLIENT_ID"> // Required. Replace SB_CLIENT_ID with your sandbox client ID.
  </script>

  <div id="paypal-button-container"></div>

  <script>
    paypal.Buttons({
    createOrder: function(data, actions) {
      // This function sets up the details of the transaction, including the amount and line item details.
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: '0.01'
          }
        }]
      });
    },
    onApprove: function(data, actions) {
      // This function captures the funds from the transaction.
      return actions.order.capture().then(function(details) {
        // This function shows a transaction success message to your buyer.
        alert('Transaction completed by ' + details.payer.name.given_name);
      });
    }
  }).render('#paypal-button-container');
  //This function displays Smart Payment Buttons on your web page.
  </script>
Hilft das weiter?
 

Tronjer

Moderator
Teammitglied
Moderator
8 Oktober 2010
5.220
480
83
Berlin
Du darfst das Script nicht initial laden, sondern per Click-Event auf der Checkbox.
 

Matthias

Mitglied
15 April 2017
98
0
6
31
Im vorherigen Thread ging es um das Ein- und Ausblenden von divs mittels JS. Hier geht es jetzt um das Laden der divs nach Klick auf die Checkbox.
 

Tronjer

Moderator
Teammitglied
Moderator
8 Oktober 2010
5.220
480
83
Berlin
Dann kapsel den Paypal Code doch in einer Funktion, die beim Klick auf die Checkbox ausgeführt wird.