js如何修改button上的文字

JavaScript031

js如何修改button上的文字,第1张

1．首先，打开hbuilder软件，在空白文件中写入两个button，并将id属性设置为btn1和btn2，在下面添加脚本标签以获取dom。 button1的元素，并为其button标签赋予click事件，当单击button1时，文本将更改。

2．然后，按crtl ＋ s保存，可以在浏览器中看到两个按钮。

3．接着，在右侧浏览器中单击button1的按钮，button1的文本内容将更改。

4． jQuery首先需要将jQuery导入下面的文件，然后使用jQuery的“ ＄”选择器获取button2的dom，并为其设置click事件，然后可以更改按钮的内容。

5．最后，保存后，在浏览器中单击button2，还可以观察到文本内容已更改。操作完成。

你的代码中主要有两个问题：

delNode 应该放到 window.onload 函数的外面来，否则在全局范围内找不到delNode这个函数，你删除的时候就会出问题；

你要删除的元素应该是在id为content这个容器里，而不是body，所以removeChild的对象要换成 content

代码如下：

```js

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<input type="text" id="txt1"/>

<button id="btn1">确定</button>

<span></span>

<div id="content"></div>

</div>

</body>

</html>

<script>

//删除元素,这个要放到window.onload外面来，否则在全局中找不到delNode这个函数

function delNode(e)

{

console.log("del",e)

var one_parentNode=e.parentNode

var two_parentNode=one_parentNode.parentNode

document.getElementById('content').removeChild(two_parentNode)//这里作了修改

}

window.onload=function(){

var oBtn=document.getElementById('btn1') //按钮

var oTxt=document.getElementById('txt1') //输入框

var oContent=document.getElementById('content') //最大的容器

var oSpan_list=document.getElementsByTagName('span') //span

var count=0

//回车且内容不为空

oTxt.onkeypress=function(event){

if(event.keyCode=="13"&&oTxt.value!="")

{

addNote()

}

}

//点击按钮且内容不为空

oBtn.onclick=function(){

if(oTxt.value != "")

{

addNote()

}

}

//添加元素

function addNote(){

var oP=document.getElementsByClassName('headline')[count]

var aLittle=document.createElement('div') //新建box

var aP=document.createElement('p') //新建小字

var aSpan=document.createElement('span')

var aX=document.createElement('input')

var aDiv=document.createElement('div') //放文本的

aLittle.className="box"

oContent.appendChild(aLittle)

aP.className="headline"

aLittle.appendChild(aP)

aSpan.className="note"

aSpan.innerHTML="note "+parseInt(count+1)

aP.appendChild(aSpan)

aX.className='X'

aX.type="button"

aX.value='X'

aX.setAttribute("onclick","delNode(this)")

aP.appendChild(aX)

aDiv.innerHTML=oTxt.value

aDiv.className="things"

aLittle.appendChild(aDiv)

count++

}

}

</script>

```