开发者问题收集

使用 JavaScript 时，按钮 onclick id 更改在 Html 中不起作用

2017-11-30
519
javascript jquery html

我想使用 onclick 按钮更改文本区域的 ID。因此，我创建了两个按钮，分别在字段上。每次单击时，都会运行一个函数。

问题：它只是第一次替换了我的 ID，第二次单击第二个按钮时，它会抛出错误，提示“Uncaught TypeError：无法在 ti_pos_fun (index.html:491) 处设置 null 的属性‘id’” 

HTML code-
<div>
<label for="usr">ti:</label> <i class="glyphicon glyphicon-check" onclick="ti_pos_fun()"></i> <i class='glyphicon glyphicon-unchecked' onclick="ti_neg_fun()"></i>
</div>

我尝试使用两个按钮 - 例如

现在，当您单击检查按钮时 - ti 会运行 onclick 函数“ti_pos_fun”。

函数如下 

function ti_neg_fun ()
{
var a = document.getElementById("jsel");
a.id = "ti_neg";
//$("#ti_neg").text('angry');
document.getElementById('ti_neg').innerHTML = 'angry';
}
function ti_pos_fun ()
{
var a = document.getElementById("jsel");
a.id = "ti_pos";
 document.getElementById('ti_pos').innerHTML = 'hahahahaha';
 //$("#ti_pos").text('hahahaha');

}

这些 ID 所在的文本区域代码 &他们的文本。 

<div class="col-md-10">
    <H3> textarea</H3>
    <textarea id = "jsel"></textarea> 
    </div>
  1. 您点击按钮 1 - 选中按钮
  2. 它获取文本区域中的 ID 和文本
  3. 当您点击按钮 2 - 取消选中按钮时
  4. 它失败了
2个回答

第二次单击时它不起作用，因为您正在覆盖该元素的 id 

//a.id = "ti_neg";

因此第二次单击时没有 id 为 jsel 的元素，并且下面的语句将返回 null，并且它将不起作用。 

document.getElementById("jsel");

function ti_neg_fun ()
{
var a = document.getElementById("jsel");
//a.id = "ti_neg";
//$("#ti_neg").text('angry');
document.getElementById('jsel').innerHTML = 'angry';
}
function ti_pos_fun ()
{
var a = document.getElementById("jsel");
//a.id = "ti_pos";
 document.getElementById('jsel').innerHTML = 'hahahahaha';
 //$("#ti_pos").text('hahahaha');

}
<div>
<label for="usr">ti:</label> <i class="glyphicon glyphicon-check" onclick="ti_pos_fun()">1</i> <i class='glyphicon glyphicon-unchecked' onclick="ti_neg_fun()">2</i>
</div>

<div class="col-md-10">
    <H3> textarea</H3>
    <textarea id = "jsel"></textarea> 
    </div>
sumeet kumar
2017-11-30

这是因为 ID 不再是 jsel，所以您需要类似这样的内容，如果找不到 jsel，请检查 ID 是否为其他函数集，反之亦然。编辑：添加了有效的代码片段。 

function ti_pos_fun ()
    {
    var a = document.getElementById("jsel");
    if (a != null){
    a.id = "ti_pos";
     document.getElementById('ti_pos').innerHTML = 'hahahahaha';
     //$("#ti_pos").text('hahahaha');
    }else{
    var a = document.getElementById("ti_neg");
    a.id = "ti_pos";
     document.getElementById('ti_pos').innerHTML = 'hahahahaha';
     //$("#ti_pos").text('hahahaha');
    }
    }

    function ti_neg_fun ()
    {
    var a = document.getElementById("jsel");
    if(a != null){
    a.id = "ti_neg";
    //$("#ti_neg").text('angry');
    document.getElementById('ti_neg').innerHTML = 'angry';
    }else{
    var a = document.getElementById("ti_pos");
    a.id = "ti_neg";
    //$("#ti_neg").text('angry');
    document.getElementById('ti_neg').innerHTML = 'angry';
    }
    }
<div>
<label for="usr">ti:</label> <i class="glyphicon glyphicon-check" onclick="ti_pos_fun()">postitive</i> <i class='glyphicon glyphicon-unchecked' onclick="ti_neg_fun()">negative</i>
</div>

<div class="col-md-10">
    <H3> textarea</H3>
    <textarea id = "jsel"></textarea> 
    </div>
Scath
2017-11-30