Fencer300 Fencer300 - 3 months ago 9
HTML Question

Can't link java into html/html file not replacing text

I have an html and javascript files



function saved() {
"use strict";
var description;
description = document.getElementById("description").value;
}
function savedd() {
"use strict";
var due_date;
due_date = document.getElementById("due_date").value;
}
function saverd() {
"use strict";
var reminder_date = document.getElementById("reminder_date").value;
}
document.getElementsByClassName("result").innerHTML = "My new text!";

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=.5, maximum-scale=1, minimum-scale=1, width=device-width" />
</head>
<body>
<div style="margin:0 auto;text-align:center">

<!-- Div align in the middle -->
<div style="margin-left:auto;margin-right:auto;text-align:center">
<form>
Description:<br>
<input type="text" name="description" onchange="saved()"><br>
<br>
<br>
Due Date:<br>
<input type="date" name="due_date" onchange="savedd()" ><br>
<br>
<br>
Reminder Date: <br>
<input type="text" name="reminder_date" onchange="saverd()"><br>
</form>
</div>
<div class="result"> PlaceHolder</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type='text/javascript' src="editpage.js"></script>

</body>
</html>





I want it to eventually replace the PlaceHolder text with the Description stored data so that I know that that part of the script is working properly so I can call on it later, but now it just sticks to saying PlaceHolder

Answer

Change getElementsByClassName("result") to getElementsByClassName("result")[0]. Your original call returns a collection of nodes, you want to set the innerHTML on a specific node.

Here's a fixed version of your snippet:

document.getElementsByClassName("result")[0].innerHTML = "My new text!";
<div style="margin:0 auto;text-align:center">

  <!-- Div align in the middle -->
  <div style="margin-left:auto;margin-right:auto;text-align:center">
    <form>
      Description:
      <br>
      <input type="text" name="description" onchange="saved()">
      <br>
      <br>
      <br>Due Date:
      <br>
      <input type="date" name="due_date" onchange="savedd()">
      <br>
      <br>
      <br>Reminder Date:
      <br>
      <input type="text" name="reminder_date" onchange="saverd()">
      <br>
    </form>
  </div>
  <div class="result">PlaceHolder</div>
</div>

Comments