CODEWITHSUNDEEP
javascriptjqueryhtml
Naomi
Naomi

Reputation: 1298

change <p> to input value when click button

I've got this code HTML

    <h2 class="p1">Player 1</h2>
    <input type="text" class="addName1" value="Player 1"></input><button class="addName1b">Add name</button>

Jquery

$('.addName1b').click(function() {
    var $this = $(this);
    $this.toggleClass('addName1b');
    if ($this.hasClass('addName1b')) {
        $this.text('Add name');
    } else {
        $this.text('Change name');
    }
    $('.addName1').toggle();
    $(/*TEXT FROM INPUT*/).appendTo(".p1");
});

I want the Player 1 to change into the text from the input box when I press the button but can't figure out how. Help please :) As you can see I was planning on using .appendTo but I don't know how to access the text from the input element.

Thanks

Upvotes: 1

Views: 2714

Answers (4)

zer00ne
zer00ne

Reputation: 43910

  • Used a variable to store the new name,
  • Got the new name from the input using .val()
  • Reversed the last line because the selector $('.p1')goes first then the value is last (newName).
  • There's no parentheses because it's a variable representing a string.

Change the last two lines to this:

 var newName = $('.addName1').val();
$(".p1").text(newName);


$(function() {
  
$('.addName1b').click(function() {
    var $this = $(this);
    $this.toggleClass('addName1b');
    if ($this.hasClass('addName1b')) {
        $this.text('Add name');
    } else {
        $this.text('Change name');
    }

    var newName = $('.addName1').val();
    $(".p1").text(newName);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>


<h2 class="p1">Player 1</h2>
<input type="text" class="addName1" value="Player 1" />
<button class="addName1b">Add name</button>

Upvotes: 1

kekacbre
kekacbre

Reputation: 1

Input does not close like this

<h2 class="p1">Player 1</h2>
<input type="text" class="addName1" value="Player 1"></input><button class="addName1b">Add name</button>

just 

<input .... />

Your JS - modified

$('.addName1b').click(function() {
    var $this = $(this);
    var $input_val = $('.addName1').val();
    $this.toggleClass('addName1b');
    if ($this.hasClass('addName1b')) {
        $this.text('Add name');
    } else {
        $this.text('Change name');
    }
    $('.addName1').toggle();
    $('.p1').text($input_val);
});

here's jsfiddle: https://jsfiddle.net/qgumjy7b/

Hope this helps to understand what are you missing.

Upvotes: 0

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18997

Use it this line of code

 $('.p1').text($('.addName1').val());

in the place where you have $(/*TEXT FROM INPUT*/).appendTo(".p1");

appendTo is not the right choice for your goal here, appendTo is used to append elements into another, but your requirement is to change the text of the element, you must use .text()

Here is a working snippet.

$('.addName1b').click(function() {
    var $this = $(this);
    $this.toggleClass('addName1b');
    if ($this.hasClass('addName1b')) {
        $this.text('Add name');
    } else {
        $this.text('Change name');
    }
    $('.addName1').toggle();
    $('.p1').text($('.addName1').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="p1">Player 1</h2>
    <input type="text" class="addName1" value="Player 1"></input><button class="addName1b">Add name</button>

Upvotes: 3

SirCapy
SirCapy

Reputation: 295

Maybe you should use some framework?) Something like angular, knockout, reactjs? Excellent for something like this purposes.

But. For reading input value you can use something like:

  $('#id').val();

Upvotes: 0

Related Questions