Question

我有以下只运行一次的JavaScript代码。

我想我需要将它放在某种类型的循环中，但我不确定如何。我对JavaScript非常陌生，所以如果在构建代码的方式上有一些重大的新手错误，我会事先道歉。它第一次完美运作。

我可以点击提交并将输入发布到页面，然后会出现编辑按钮。当我单击编辑按钮时，它会再次显示输入字段。但是，当我在编辑输入后第二次单击提交时，一切都消失，屏幕变为空白。

const button = document.getElementById('submitArticleButton');
const editButton = document.getElementById('editPost');
const p = document.getElementById('userArticleContent');
const h1 = document.getElementById('userArticleHeader');
const inputFields = document.querySelector('.inputFields');
const newArticleDiv = document.querySelector('#newArticle');


button.addEventListener('click', () => {


    const inputHeader = document.getElementById('headline').value;
    const inputContent = document.getElementById('articleContent').value;
    inputFields.style.display = 'none';
    p.innerHTML = inputContent;
    h1.innerHTML = inputHeader;
    editButton.style.display = 'block';//previously set to display none with css

});

editButton.addEventListener('click', () => {
    inputFields.style.display = 'block';
    newArticleDiv.style.display = 'none';

});

HTML 标题或标题

<label for="articleContent">Enter your content here</label><br>
<textarea id="articleContent" placeholder="Once upon a time.....">
</textarea>
<button id="submitArticleButton">Submit!</button>

</div>

<div id="newArticle">
<h1 id="userArticleHeader"></h1>
<p id="userArticleContent"></p>
<button id="editPost">Edit</button>

</div>

</body>

Answer 1

您只需删除第newArticleDiv.style.display = 'none';行

即可

editButton.addEventListener('click', () => {
    inputFields.style.display = 'block';
    //newArticleDiv.style.display = 'none';

});

Answer 2

屏幕变为空白，因为您没有第二次显示Intent intent = getIntent(); String [] managerarray = intent.getStringArrayExtra("managerarray"); String [] supervisors = intent.getStringArrayExtra("supervisors");分区。在开始时，您将使用CSS隐藏编辑按钮。所以它什么都没有，所以你只看到两个带有提交按钮的文本框。单击“提交”按钮后，您将隐藏newArticle并将信息添加到inputFields和p标记并启用h1按钮。

现在，如果您点击修改按钮，则隐藏了edit div，其中包含newArticle，p和h按钮，并显示两个文本框提交按钮div。现在，如果再次单击提交，则必须显示edit div，否则您将看不到任何内容。因为它处于newArticle状态。所以你必须像下面那样更新代码。

display:none

以下是带有更新小提琴的片段，并查看它是如何工作的。

＆＃13;

  button.addEventListener('click', () => {      
    const inputHeader = document.getElementById('headline').value;
    const inputContent = document.getElementById('articleContent').value;
    inputFields.style.display = 'none';
    p.innerHTML = inputContent;
    h1.innerHTML = inputHeader;
    newArticleDiv.style.display = 'block'; /* this line should added */
    editButton.style.display = 'block';
 });

＆＃13;

    const button = document.getElementById('submitArticleButton');
	const editButton = document.getElementById('editPost');
	const p = document.getElementById('userArticleContent');
	const h1 = document.getElementById('userArticleHeader');
	const inputFields = document.querySelector('.inputFields');
	const newArticleDiv = document.querySelector('#newArticle');
	
	
	button.addEventListener('click', () => {
		const inputHeader = document.getElementById('headline').value;
		const inputContent = document.getElementById('articleContent').value;
		inputFields.style.display = 'none';
		p.innerHTML = inputContent;
		h1.innerHTML = inputHeader;
        newArticleDiv.style.display = 'block';
		editButton.style.display = 'block';
		// create edit button
	});
	
	editButton.addEventListener('click', () => {
		inputFields.style.display = 'block';
		newArticleDiv.style.display = 'none';    		
	});

＆＃13;

   
    body {
		max-width: 60%;
		margin: auto;
		margin-top: 2em;
	}    	
	#headline,
	#articleContent {
		width: 100%;
		padding: 8px;
		margin:.5em 0;
	}    	
	#articleContent {
		min-height:  20em;    		
	}    	
	label {    		
		font-weight: bold;
	}    	
	#editPost {
		display: none;
	}

＆＃13;

addEventListener只运行一次。有人可以解释原因吗？

2 个答案: