Question 196957 in Html Question posted in
Some basic documentation can be found here.

Html – Change Content In Another Div Using Javascript

I am looking to change content of another div (id="new-text") by clicking on a link container and using a JavaScript function (show-text())

    <section>
        <div class="row">               
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3">
            <a href="#" id="text-1" onclick="show-text()">
            <div class="home-side-menu">Mission Statement</div></a>
            <a href="#" id="text-2" onclick="show-text()">
            <div class="home-side-menu">Letter-writing</div></a>
            <a href="#" id="text-3" onclick="show-text()">
            <div class="home-side-menu">Peace Ideas</div></a>
            <a href="#" id="text-4" onclick="show-text()">
            <div class="home-side-menu">Power Of Love</div></a>
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-9 col-xl-9">
            <div class="text-formatting" id="new-text">
            </div>
        </div>
        </div>
    </section>



    <script type="text/javascript">
        function show-text(id){
            if id="text-1"
            document.getElementById('new-text').innerHTML="SAMPLE TEXT 1"
            if id="text-2"
            document.getElementById('new-text').innerHTML="SAMPLE TEXT 2"
            if id="text-3"
            document.getElementById('new-text').innerHTML="SAMPLE TEXT 3"
            if id="text-4"
            document.getElementById('new-text').innerHTML="SAMPLE TEXT 4"           
        }
    </script>
Tags:

2

Answers


  1. 0

    The Changed Code(Working) : https://jsfiddle.net/51wbksv9/

    Inside onclick="show-text() ,pass valid arguments ( that matches with your IF conditions) like ‘text-1’ or ‘text-2’..

    It should be <a href="#" id="text-1" onclick="show-text('text-1')">
    and same follows rest of them.

    and use == inside Script , for comparison. Check this for Js Comparison Operators

    Login or Signup to reply.
  2. 0

    You have invalid HTML and JavaScript, so those errors must be corrected first.

    See comments inline for details.

    /* CSS to make the clickable <div>'s look like hyperlinks */
.home-side-menu {
  color:#00f;
  cursor:pointer;
}

.home-side-menu:hover {
  color:#f00;
}
    <section>
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3">
      <!-- Don't use <a> elements as a way to hook into a click event.
           Hyperlinks are for navigation. Just about all visual elements
           on a web page support a click event, so here just set the 
           div elements that have the right class to have a click event. -->
      <div id="text-1" class="home-side-menu">Mission Statement</div>
      <div id="text-2" class="home-side-menu">Letter-writing</div>
      <div id="text-3" class="home-side-menu">Peace Ideas</div>
      <div id="text-4" class="home-side-menu">Power Of Love</div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-9 col-xl-9">
    <div class="text-formatting" id="new-text"></div>
  </div>
</section>


<!-- type="text/javascript" hasn't been needed in years. That's the default. -->
<script>
  // Get your DOM references just once:
  const destination = document.getElementById('new-text');
  
  // And set up your event handlers in JavaScript, not with inline HTML attributes
  // Here, we'll set the handler on a common ancestor of all the elements that when
  // clicked should call the same handler. When one is clicked, the event will bubble
  // up to the ancestor.
  document.querySelector(".row").addEventListener("click", function(event){
    // Is this an element we care to handle?
    if(event.target.classList.contains("home-side-menu")){
      showText(event.target.id);
    }
  });

  // You can't use - in a JavaScript identifier
  function showText(id){
    // In JavaScript = means assignment. == or === is for comparison
    // Also, if statement conditions must be within parenthesis
    if(id === "text-1") {
      destination.textContent = "SAMPLE TEXT 1";
    } else if(id === "text-2") {
      destination.textContent = "SAMPLE TEXT 2";
    } else if(id ==="text-3") {
      destination.textContent = "SAMPLE TEXT 3";
    } else if(id === "text-4") {
      destination.textContent = "SAMPLE TEXT 4";
    }
  }
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search