Question

我想把字符串放在＆＃34; p＆＃34;标签，当字符串发生变化时，我仍然能够获得最新的字符串。

但我不知道如何从＆＃34; p＆＃34;标签

测试方式包括：

.text();
.val();（我知道这是保留输入，只是尝试......）
.innerHTML();

我的HTML：

<p id="testprint">Original String</p>
<p id="getString"> EMPTY  </p>
<button id="Generate">Generate</button>
<button id="Change">Change</button>
<button id="getStr">Get String to first "p" tag</button>

我的JavaScript：

function print1st(){
    document.getElementById('testprint').innerHTML = "Generated New String";
}

function changeValue(){
    document.getElementById('testprint').innerHTML = "Change String Success";
}

function getStrfrom1st(){
    copystr = document.getElementById('testprint').text();
  //copystr = document.getElementById('testprint').val();
  //copystr = document.getElementById('testprint').html();
  //copystr = document.getElementById('testprint').innerHTML();
  document.getElementById('getString').innerHTML = copystr;
}

document.getElementById('Change').addEventListener('click',changeValue,false);
document.getElementById('Generate').addEventListener('click',print1st,false);
document.getElementById('getStr').addEventListener('click',getStrfrom1st,false);

期待结果：

一旦点击生成按钮生成新字符串，一旦点击＆＃34;获取字符串＆＃34;按钮将获得结果＆＃34;生成新字符串＆＃34;。

否则，如果我点击第二个按钮更改了第一个值，一旦我点击第三个按钮将获得更改的字符串。

这是我的JSFiddle：https://jsfiddle.net/pxaw9xt4/1/

Answer 1

请检查您的浏览器控制台，您可能会看到以下错误：

TypeError：document.getElementById（...）。text不是函数

正确.text()不是javascript函数（text()＆amp; val()都是jQuery方法），所以你应该使用.innerHTML或{{ 1}}喜欢：

.textContent

注意： copystr = document.getElementById('testprint').innerHTML;方法不存在。

希望这有帮助。

＆＃13;

.innerHTML()

＆＃13;

function print1st(){
  document.getElementById('testprint').innerHTML = "Generated New String";
}

function changeValue(){
  document.getElementById('testprint').innerHTML = "Change String Success";
}

function getStrfrom1st(){
  copystr = document.getElementById('testprint').innerHTML;
  document.getElementById('getString').innerHTML = copystr;
}

document.getElementById('Change').addEventListener('click',changeValue,false);
document.getElementById('Generate').addEventListener('click',print1st,false);
document.getElementById('getStr').addEventListener('click',getStrfrom1st,false);

＆＃13;

Answer 2

使用此方法获取HTML DOM中的文本内容。

var copystr = document.getElementById("testprint").textContent;

更新＆amp;工作小提琴here。

Answer 3

你把jQuery函数与vanilla JS混淆了。 val()和text()都是jQuery中定义的函数，因此无法在vanilla JS节点上调用。既然你使用jQuery标记了这个，为什么不使用jQuery呢？您的整个代码段可以使用on()编写如下：

$('#Change').on('click', function() { $('#testprint').text('Change String Success'); });
$('#Generate').on('click', function() { $('#testprint').text('Generated New String'); });
$('#getStr').on('click', function() { $('#getString').text( $('#testprint').text() ); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="testprint">Original String</p>
<p id="getString"> EMPTY  </p>
<button id="Generate">Generate</button>
<button id="Change">Change</button>
<button id="getStr">Get String to first "p" tag</button>

或者，如果您更喜欢仅使用vanilla JS处理此问题，则可以使用innerHTML属性，如下所示：

function print1st() {
    document.getElementById('testprint').innerHTML = "Generated New String";
}

function changeValue() {
    document.getElementById('testprint').innerHTML = "Change String Success";
}

function getStrfrom1st() {
    copystr = document.getElementById('testprint').innerHTML;
    document.getElementById('getString').innerHTML = copystr;
}

document.getElementById('Change').addEventListener('click',changeValue,false);
document.getElementById('Generate').addEventListener('click',print1st,false);
document.getElementById('getStr').addEventListener('click',getStrfrom1st,false);

<p id="testprint">Original String</p>
<p id="getString"> EMPTY  </p>
<button id="Generate">Generate</button>
<button id="Change">Change</button>
<button id="getStr">Get String to first "p" tag</button>

Answer 4

使用Jquery您可以使用on方法将点击事件添加到按钮，并使用#id选择器我们可以获取/设置p标记的文字

＆＃13;

$('#Change').on('click', function()
{
  $('#testprint').text('Change String Success');
});
$('#Generate').on('click', function() 
{
  $('#testprint').text('Generated New String'); 
});
$('#getStr').on('click', function() 
{ 
  $('#getString').text( $('#testprint').text() ); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="testprint">Original String</p>
<p id="getString"> EMPTY  </p>
<button id="Generate">Generate</button>
<button id="Change">Change</button>
<button id="getStr">Get String to first "p" tag</button>

＆＃13;

Answer 5

您可以按照设置的方式获取值

copystr = document.getElementById('testprint').innerHTML ;

Answer 6

只需使用textContent。

示例：

var copystr = document.getElementById('testprint').textContent;

此处更新了JsFiddle

Answer 7

innerHTML不应包含括号。检查jsfiddle

copystr = document.getElementById('testprint').innerHTML;

https://jsfiddle.net/pxaw9xt4/7/

如何在<p>标记

7 个答案: