CODEWITHSUNDEEP
javascriptjqueryhtml
Twan Nieborg
Twan Nieborg

Reputation: 35

Javascript wont replace my <div> text

I have made a Javascript that will replace the text in the Div with the text that I put in my input 

<!DOCTYPE html> 
<html>
    <body>
        <form>
            <input type="text" id="div1" />
            <input type="text" id="div2" />
            <input type="text" id="div3" />
            <button type="button" onclick="ChangeText()">Submit</button>
        </form>

        <div id="Div5">
            Text goes here
        </div>

        <script>
            function ChangeText()
            {
                // Place text in page
                var test1 = document.getElementById("div1").value;
                var test2 = document.getElementById("div2").value;
                var test3 = document.getElementById("div3").value;
                var test = test1 + "</br>" + test2 + "</br>" + test3;
                document.getElementById("Div5").innerHTML = test;
            }
        </script>
    </body>
</html>

But it wont change it, nothing happens. EDIT: The answers I got work for a normal HTML page. But I should have probably added that I need this to work on a jQuery mobile page.
I hope anyone can help me with that?

Upvotes: 3

Views: 93

Answers (4)

Chirag Suthar
Chirag Suthar

Reputation: 21

Replace Your code with

    <!DOCTYPE html> 
<html>
 <body>
 <form>
 <input type="text" id="div1"> </input> <input type="text" id="div2">
 </input>
 <input type="text" id="div3"> </input> 

 <script> function ChangeText() { 
    // Place text in page 
    var test1 = document.getElementById("div1").value;
     var test2 = document.getElementById("div2").value; 
     var test3 = document.getElementById("div3").value;
      var test = test1 + "</br>" + test2 + "</br>" + test3;
       document.getElementById("Div5").innerHTML = test; 
       } </script> 

 <input onclick="ChangeText()" type=button value=Submit > 
</form> 
<div id="Div5"> Text goes here </div>
 </body> 
</html>

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

The button tag inside a form has type='submit' by default, so when you click the form will be submited and the page will be refreshed so you will not see the change on the div's, change it to type='button' to avoid that :

<button type='button' onclick="ChangeText()">Submit</button>

NOTE : input tag is one of the self-closing tags so it should be :

<input type="text" id="div1" />

Instead of :

<input type="text" id="div1"></input>

Hope this helps.

function ChangeText()
{
  // Place text in page
  var test1 = document.getElementById("div1").value;
  var test2 = document.getElementById("div2").value;
  var test3 = document.getElementById("div3").value;
  var test = test1 + "</br>" + test2 + "</br>" + test3;
  document.getElementById("Div5").innerHTML = test;
}
<form>
  <input type="text" id="div1" /> 
  <input type="text" id="div2" />
  <input type="text" id="div3" />
  <button onclick="ChangeText()">Submit</button>
</form>

<div id="Div5">
  Text goes here
</div>

Upvotes: 3

Rana Ghosh
Rana Ghosh

Reputation: 4674

As you have not given any button type and button is in form that's why it's by default taken as submit button. And after completing your JS code it's automatically submitted the form.

Your code is almost correct except the htlml button tag please follow below::

Please replace your button tag with this ::

<button type="button" onclick="ChangeText();">Submit</button>

OR

<button onclick="ChangeText(); return false;">Submit</button>

It will worked perfectly.

Upvotes: 3

bmdixon
bmdixon

Reputation: 352

You need to change

<button onclick="ChangeText()">Submit</button>

to

<button type='button' onclick="ChangeText()">Submit</button>


<form>
  <input type="text" id="div1"> </input>
  <input type="text" id="div2"> </input>
  <input type="text" id="div3"> </input>
  <button type='button' onclick="ChangeText()">Submit</button>
</form>

<div id="Div5">
  Text goes here
</div>

<script>
  function ChangeText() {
    // Place text in page
    var test1 = document.getElementById("div1").value;
    var test2 = document.getElementById("div2").value;
    var test3 = document.getElementById("div3").value;
    var test = test1 + "</br>" + test2 + "</br>" + test3;
    document.getElementById("Div5").innerHTML = test;
  }

</script>

Upvotes: 1

Related Questions