I recently wrote another project and used InnerHtml, but after I found that after calling InnerHtml, OnClick was invalidated. This is also expected. Because InnerHtml is an Button inserted in text, we cannot recognize the OnClick incident. Finding the way, we cannot achieve it directly, but it can be implemented indirectly. Let's take an example:
Example 1: This example is onClick that cannot be achieved
Copy code code as follows:
<html>
<head>
<script defer>
Function Inscell (TH)
var name = th.name;
var ID = Th.id;
if (name == "no") {{
id.innerHtml = "<input Type = 'Button' onClick = 'Inscall (this)' value = 'online'
name = 'no' id = '1'> "";
} Else {
id.innerHtml = "<input Type = 'Button' onClick = 'Inscall (this)' value = 'offline'
name = 'yes' id = '1'> "" ";
}
</script>
</head>
<body>
<br />
<span id = "msg">
<input type = "Button" OnClick = "Inscall (this)" Value = "offline" name = "yes" id = "1">
</span>
</body>
</html>
The above example is to judge whether it is online based on the name of Button or offline ~~~ We find that when you click the first time, you will be invalid ~~~~~~
At this time, we can realize disguise, as follows:
Copy code code as follows:
<html>
<head>
<script defer>
Function Inscell (TH)
{{
var name = th.name;
var ID = Th.id;
alert (name+"-"+ID);
var span = document.GetelementByid (ID);
if (name == "no") {{
span.innerHtml = "<input Type = 'Button' Value = 'offline'>";
span.name = "yes";
} Else {
span.innerHtml = "<input Type = 'Button' Value = 'Go online'>";
span.name = "no";
}
}
</script>
</head>
<body>
<br />
<span ID = "1" OnClick = "Inscell (this)" name = "no">
<input type = "Button" value = "online">
</span>
</body>
</html>