dom manipulations uses elements

This commit is contained in:
realaravinth
2021-05-09 16:39:52 +05:30
parent cd729effb9
commit 686774a182
30 changed files with 262 additions and 128 deletions

View File

@@ -69,16 +69,21 @@ export const addRemoveLevelButtonEventListenerAll = () => {
*/
export const getRemoveButtonHTML = (level: number) => {
log.log(`[generating HTML getHtml]level: ${level}`);
const HTML = `
${CONST.REMOVE_LEVEL_LABEL_TEXT}
<input
class="${CONST.REMOVE_LEVEL_BUTTON_CLASS}"
type="button"
name="${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}"
id="${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}"
value="x"
/>
</fieldset>
`;
return HTML;
const btn = document.createElement('input');
btn.className = CONST.REMOVE_LEVEL_BUTTON_CLASS;
btn.type = 'button';
const id = `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}`;
btn.name = id;
btn.id = id;
btn.value = 'x';
const removeLabel = document.createElement('label');
removeLabel.className = CONST.REMOVE_LEVEL_LABEL_CLASS;
const removeLabelText = document.createTextNode('RemoveLevel');
removeLabel.appendChild(removeLabelText);
removeLabel.appendChild(btn);
removeLabel.htmlFor = id;
return removeLabel;
};

View File

@@ -46,7 +46,7 @@ const setUp = () => {
log.setMode(MODE.none);
it('addLevelButton works', () => {
it('removeLevelButton works', () => {
setUp();
for (let i = 1; i < 4; i++) {

View File

@@ -53,9 +53,11 @@ const updateLevelNumbersOnDOM = (id: number) => {
}
// rename legend
const legendText = document.createTextNode(`Level ${newLevel}`);
levelGroup.getElementsByTagName(
'legend',
)[0].innerText = `Level ${newLevel}`;
)[0].appendChild(legendText);
// rename labels
updateLabels(levelGroup, newLevel);

View File

@@ -15,7 +15,6 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import getNumLevels from '../../levels/getNumLevels';
import {getAddForm, trim} from '../../setupTests';
import updateInputs from './updateInputs';
import CONST from '../../const';
@@ -29,7 +28,7 @@ document.body.innerHTML = getAddForm();
log.setMode(MODE.none);
it('addLevelButton works', () => {
it('updateInputs works', () => {
setupAddlevels();
// removing level 2
const level = 2;

View File

@@ -36,7 +36,9 @@ const updateInput = (levelGroup: Element, newLevel: number) => {
input.id = id;
input.name = id;
} else {
throw new Error('Did you add an extra input to DOM?');
if (input.id != 'add') {
throw new Error(`Did you add an extra input to DOM? ${input.id} ${input.className} ${input.name}`);
}
}
});
};