0

Can I switch the content via JavaScript or JQuery? I have content A and content B, where position A is next to envy and B is on the right, when I click the check box the content B will change to the left and content A to the right, and when I click again, it will change to like the beginning again.

This my snippet, I tried exchanging all div content between A and B. When I clicked on the check box, there will be all content in div A will exchange with div B. but why does only the input form change? while the content doesn't change, can anyone help me? is there something wrong with my code?

function swap_content(conta,contb)
  {
    var tmp = document.getElementById(conta).value;
    document.getElementById(conta).value = document.getElementById(contb).value;
    document.getElementById(contb).value = tmp;
    var tdp = document.getElementById(text_id1).value;
    document.getElementById(text_id1).value = document.getElementById(text_id2).value;
    document.getElementById(text_id2).value = tdp;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">


<body>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-5" id="conta" style="background: red;">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>
                            <input type="text" name="text_id1" id="text_id1" value="content A" >
                        </h5>
                    </div>
                    <div class="ibox-body">
                     <span style="color:white">
                     This is desc about Content A </span><br>

                     <img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
                 </div>
             </div>
         </div>

         <div class="col-lg-2">
            <div class="ibox ">
                <div class="ibox-title">

                    <div class="switch">
                        <div class="onoffswitch">
                            <input type="checkbox" checked class="onoffswitch-checkbox" id="example1" onclick="swap_content('text_id1','text_id2')">
                            <label class="onoffswitch-label" for="example1">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-lg-5" id="contb" style="background: blue">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>
                        <input type="text" name="text_id2" id="text_id2" value="content B" >
                    </h5>
                </div>
                <div class="ibox-body">
                    <span style="color:white">This is desc about Content B</span> <br>

                    <img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">

                </div>
            </div>
        </div>

    </div>
</div>
<script src="http://webapplayers.com/inspinia_admin-v2.8/js/jquery-3.1.1.min.js"></script>
</body>
AdityaDees
  • 1,022
  • 18
  • 39
  • 4
    Yes, you can, but what have you tried? We expect that you'll do research and make an attempt first. Try a Google search for "swap content using JavaScript" and you'll find lots of things you can research. – Scott Marcus Apr 30 '19 at 22:40
  • 404 not found: Missing code attempt – mwilson Apr 30 '19 at 23:00
  • @ScottMarcus i've add my snipet code – AdityaDees May 01 '19 at 06:44
  • 1
    wait isn't this the same question here https://stackoverflow.com/questions/55932692/using-checkbox-to-swap-the-position-of-content-inside-div-element/55932943# – Junius L May 01 '19 at 08:17

2 Answers2

1

Only the input values change because that's all your code attempts to work with (text_id1 and text_id2).

You had the right idea, but you really just need to swap the contents of div id="conta" and div id="contb", but only form-field elements have a value property. div elements have either the .textContent property (for getting/setting just the text within the element) or the .innerHTML property (for getting/setting text that contains HTML that needs to be parsed).

Lastly, don't use inline HTML event attributes, such as onclick. There are a bunch of reasons not to use this 25+ year old technique. Instead, do all your event binding in JavaScript - separate from your HTML.

// Get reference to the checkbox and set up click event handler
var cb = document.getElementById("example1").addEventListener("click", swap_content);  

// Store references to the two div elements
var conta = document.getElementById("conta");
var contb = document.getElementById("contb"); 

function swap_content() {
  // Non-form field elements don't have .value, they have .innerHTML
  var tmp = conta.innerHTML;
  conta.innerHTML = contb.innerHTML;
  contb.innerHTML = tmp;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">


<body>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-5" id="conta" style="background: red;">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>
                            <input type="text" name="text_id1" id="text_id1" value="content A" >
                        </h5>
                    </div>
                    <div class="ibox-body">
                     <span style="color:white">
                     This is desc about Content A </span><br>

                     <img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
                 </div>
             </div>
         </div>

         <div class="col-lg-2">
            <div class="ibox ">
                <div class="ibox-title">

                    <div class="switch">
                        <div class="onoffswitch">
                            <input type="checkbox" checked class="onoffswitch-checkbox" id="example1">
                            <label class="onoffswitch-label" for="example1">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-lg-5" id="contb" style="background: blue">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>
                        <input type="text" name="text_id2" id="text_id2" value="content B" >
                    </h5>
                </div>
                <div class="ibox-body">
                    <span style="color:white">This is desc about Content B</span> <br>

                    <img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">

                </div>
            </div>
        </div>

    </div>
</div>
<script src="http://webapplayers.com/inspinia_admin-v2.8/js/jquery-3.1.1.min.js"></script>
</body>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
0

You can try this:

function swap_content(conta, contb) {
    var contentA = document.getElementById(conta).innerHTML;
    document.getElementById(conta).innerHTML = document.getElementById(contb).innerHTML;
    document.getElementById(contb).innerHTML = contentA;
}

Note: You need to pass the id's of div which contents you are willing to swap. Change onlick function to onclick="swap_content('conta','contb')"

Pintu Kumar
  • 311
  • 1
  • 9