spot7.org logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories

Javascript: Saving .innerHTML Data with a Button


I think you are misunderstanding what innerHTML is. When you do b1 = boxOne.innerHTML, you are storing the string that is the current html in b1. You are not storing a reference to the innerHTML property. So, when you do boxOne.innerHTML = 'X', you change the inner html of the object but b1 still holds whatever the inner HTML was originally.

An example to clarify my statement:

window.onload = function() {
  // Establish the boxes for the selector
  var boxOne = document.querySelector("#b1");

  // initialInnerHTML won't change when you change
boxOne.innerHTML
  var initialInnerHTML = boxOne.innerHTML;

  boxOne.innerHTML = '<a>New
link</a>'; // Change the dom content
  var newInnerHTML = boxOne.innerHTML;

  alert(initialInnerHTML); // Alerts a blank
dialog
  alert(newInnerHTML); // Alerts "<a>New
link</a>"


  // An example of storing a reference to an
object
  var shoppingCart = {
          apples: { price: 6, quantity: 7 },
          oranges: { price: 10, quantity: 8 }
      };
  var appleReference = shoppingCart.apples;

  alert(appleReference.quantity); // Alerts 7

  shoppingCart.apples.quantity = 9;

  alert(appleReference.quantity); // Alerts 9

}

To fix your issue, you need to get the innerHTML property of the dom elements on each button press instead of doing it only when the page is loaded.

Your second issue is because document.querySelector('.box') only returns the first dom element that matches the selector. You should use document.querySelectorAll('.box') which returns an array of the elements. Then, loop over the array and set the innerHTML on each one.

clear button:

  var clearButton =
document.getElementById('clear');
  var allBoxes =
document.querySelectorAll(".box");

  clearButton.onclick = function() {
    for(var i = 0; i < allBoxes.length; i++){
        allBoxes[i].innerHTML = "";
    }
  }

Categories : Javascript

Related to : Javascript: Saving .innerHTML Data with a Button
Javascript: if-else statement in document.getElementById.innerHTML not working
use ternary operator, as: var vals = (values[i] < 0 ) ? 0 : values[i]; document.getElementById("div").innerHTML = "Value: " + vals;

Categories : Javascript
How to set innerhtml with selected dropdown option text using jquery or javascript?
I added <span class="text"></span> to your markup so it would be easier to select the target area: $('#shopperlanguage').on('change', function() { $('.cat-select a span.text').text( $('option:selected',this).text() ); }) .change(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <span style="white-space: nowrap;" class="" id

Categories : Javascript
Javascript alert button OK button
You can just apply your function right after the alert: alert('something');//execution is halted until ok button is pressed foo(); // calls the foo method after ok button is pressed

Categories : Javascript
Div innerHTML rewrite failure
You having some scoping issue and a recursion issue. To simplify: function foo() { var gen_nums = []; for ( var i=0; i<10; i++ ) { gen_nums.push(i) } return gen_nums; } function bar() { var nums = [1, 2, 3, 4, 5, 6, 7, 8, 9]; var copy = nums.slice(); return gen_nums; bar() } console.log(foo()) // [0, ..., 9] console.log(bar()) // error - gen_nums is not defined The r

Categories : Javascript
Javascript: Input after button click
Actually it can be easily implemented with an editable div and document.execCommand('bold'). You will have additional functionality like using keyboard shortcut (ie. ctrl+B), highlight and bold.. #text { width : 500px; min-height : 100px; border : 2px solid; } <div id="text" contenteditable="true"></div> <button id="toggle_bolt" onclick="document.execCommand('bold');"

Categories : Javascript
Recently Add
How to get selected text with JavaScript?
Non Modal Alert Messages in java script, activated by a button
How to Count [Combined] line length of multiple files?
Is there any javascript event fired when the on-screen keyboard on mobile safari or chrome opens?
Datatables sort by time ago
Internet Explorer getClientRects absolute positioned elements
How can I transform a CamanJS Filter into a KineticJS Filter?
AngularJS : index not updating after removing array item(s) by index
Slick slideshow in ember.js template
Recursive function with defer
Unable to find module mongodb in simple node.js app
Why does function return false after checking only one value in loop
Detect if the mouse is over an element
Placing and rotating svg elements along a path with Snap.svg
YouTube Asynchronous function
Cordova App: Stop JavaScript from running when App is closed
how to define a variable in an javascript ifstatement
display dd on click using jquery
jQuery Timer Countdown within Session
setInterval on click event to run for 10 seconds
Are syntax errors raised in JavaScript during Tokenizing or Parsing?
Can i perform form based http authentication for my TP-Link Wireless Router(IP: 192.168.0.1)
Blocked frame in reCapcha
Updated property not recognized by $watch
Template Missing error on update only
nodejs object declaration and immediate shorthand if statement crashes the app
Hide / show dynamically generated table columns with right / left animation
Convert UTC Date to Local Date in JavaScript
Position DOM elements without CSS
modifying mergesort to count inversions in JavaScript
© Copyright 2017 spot7.org Publishing Limited. All rights reserved.