CODEWITHSUNDEEP
javascriptjqueryhtml
jhon
jhon

Reputation: 341

Is there possible to make desicion tree using html and javascript?

i want to make a decision form like if I want to make a flow diagram, I should write a code if(#something) and make a form to set a new form if the code is right and if the code in my form isn't true, and make a new col to check another condition and make a flow to this condition.

it can be saying that if there is some condition, every condition have their own form

this is new for me to make something like this, so I'm searching for the answer or similar to this, but I didn't find the solution.

please, can anyone help me to solve this problem?

here is my javascript code

function addSplit() {
    document.querySelector('#myproyek').insertAdjacentHTML(
        'afterend',
        `<div class="form-group">
            <input type="text" name="name" value="" placeholder="condition" id="ifelse"/>
            <input type="button" value="+" onclick="addCol(this)">
            <input type="button" value="-" onclick="removeRow(this)">
        </div>`
    )
}

here is my HTML

<div id='myproyek'></div>

Upvotes: 2

Views: 303

Answers (1)

Stav Noy
Stav Noy

Reputation: 519

I don't quit understand how you mean to make the decision to add forms, so I'll write a terrible base answer to work from.

I think you mean to pass the condition via the first input, so as a start I'll use the horrible eval:

function removeCol(formGroup) {
    const condition = formGroup.firstElementChild.value;
    if (condition && eval(condition)) {
        formGroup.parentNode.removeChild(formGroup);
    }
}

function createBtn(value, onclick) {
    const btn = document.createElement('input');
    btn.type = 'button';
    btn.value = value;
    btn.onclick = onclick;
    return btn;
}

const area = document.getElementById('myproyek');

function addCol(condition) {
    if (condition && eval(condition)) {
        const formGroup = document.createElement('div');
        formGroup.insertAdjacentHTML(
            'afterbegin',
            '<input type="text" name="name" value="" placeholder="condition"/>'
        );
        formGroup.appendChild(createBtn('+', () => addCol(formGroup.firstElementChild.value)));
        formGroup.appendChild(createBtn('-', () => removeCol(formGroup)));
        area.appendChild(formGroup);
    }
}

addCol('true');

Upvotes: 1

Related Questions