Question

我有以下textarea

<textarea class="form-control" id="projectname"></textarea>

我希望得到它的价值并与此内部的值相结合：

<h1 id="team_title"> Team name </h1>

所以基本上，在我的textarea中写下“china123”后，我会进入h1以下= Team name - china123

我尝试了以下内容：

function myFunction() {
    var k = document.getElementById('team_title').innerHTML;
    var m = document.getElementById('projectname').value;
    var x = k.concat(" -" + m);
    document.getElementById('team_title').innerHTML = x;
}

我在textarea上将其添加为oninput属性。但问题似乎是每次输入后都会得到以下内容

 Team name - c -ch - chi - chin - china - china1 - china12 - china123

虽然h1标记中我想要的输出是：

Team name - china123

Answer 1

将原始前缀保存在export class LinearsvcParameter{ C: number = 0.1; //default value, i want this value change depend on input home.component.html

的data-prefix属性中

h1

现在继续将值附加到<h1 id="team_title" data-prefix="Team name "> Team name </h1>值

data-prefix

Answer 2

您可以在-上拆分字符串，然后将它们连接在一起

 var input = k.split('-')[0];
  var x = input.concat(" -" + m);

希望这会有所帮助：）

function myFunction() {
  var k = document.getElementById('team_title').innerHTML;
  var m = document.getElementById('projectname').value;
  var input = k.split('-')[0];
  var x = input.concat(" -" + m);
  document.getElementById('team_title').innerHTML = x;

}

<textarea class="form-control" id="projectname" onkeyup="myFunction()"></textarea>

<h1 id="team_title"> Team name </h1>

Answer 3

你必须调用函数onchange，这意味着每次你键入函数都会连接，你有两个选择： 1.制作一个按钮或事件，将在整个输入后连接。 2.保存h1值并与该值连接（data- * attribute）

Answer 4

我不会为此使用concat。变量m的值已经转换为字符串。在Javascript中，您可以使用+行轻松添加这些字符串。

function myFunction() {
 var k = document.getElementById('team_title').getAttribute( "data-prefix" ); //observe the change here
 var m = document.getElementById('projectname').value;
 var x = k + ' - ' + m;
 document.getElementById('team_title').innerHTML = x;
}

将textarea的值连接到另一个地方

4 个答案: