0

I am trying to use .innerHTML to overwrite a p.

The first time i do it, it overwrites it successfully however when i try it a second time it doesn't seem to work. I planned to put in some CSS in the future, so thats is empty.

THIS IS THE JAVASCRIPT 
    function create() {
        var x = document.getElementById("cName").value;
        var y = document.getElementById("cType").value;
        window.alert("Running new card")
        newCard(x,y)
    }

    function newCard(name,type) {  
        window.alert("new card ran")
        this.name = name;
        this.type = type;
    }

    function print(){
        document.getElementById("cardName").innerHTML = this.name
        document.getElementById("cardType").innerHTML = this.type
    }

THIS IS THE HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
<title>TealeStone</title>
</head>
<body>
    <script src="JavaScript.js"></script>
    <form name="newCard">
        Card Name : <input type="text" id="cName" />
        Card Type : <input type="text" id="cType" />
        <button onclick="javascript:create()">Submit</button>
    </form>
    <p id="cardName">Card name</p>
    <p id="cardType">Card type</p>
    <script>
        print()
    </script>
    </body>
    </html>
Teale
  • 33
  • 1
  • 12
  • Why are you using `this.XXX` in `newCard`? It's not an object constructor. – Barmar Oct 21 '15 at 23:35
  • You're also using `this.name` in `print()`, but it's not bound to the same object as `newCard`. It seems like you're trying to write OO code, but not creating any objects. – Barmar Oct 21 '15 at 23:38
  • this.name?? what do you want to bind to this.name and this.type wont work. – Josh Stevens Oct 21 '15 at 23:41
  • 1
    You're just calling `print()` once, when the page is first loaded. You need to call it after calling `create()`. – Barmar Oct 21 '15 at 23:41
  • Barmar, I thought it is an object contructor. If not then can you tell me why it isn't please? – Teale Oct 21 '15 at 23:57
  • @Teale Right now you are setting properties on the browser window with 'this.name' and 'this.type' in the 'newCard()' function. For an explanation about object constructors, [see this link](http://stackoverflow.com/questions/1114024/constructors-in-javascript-objects). – The fourth bird Oct 22 '15 at 11:32

0 Answers0