Finding the DOM attribute with any text and store in variable

Question

I am new in javascript. I would like to store svg.class value in variable and new to create new function.

For example below, the svg.class value is overline need to store in $overline=overline and need to create the function name like function newoverline(). How to achive this?

My html looks like below:

<span class="mord accent">
<span class="vlist-t">
    <span class="vlist-r">
        <span class="vlist" style="height: 1.20533em;">
            <span class="mord">
                <span class="mord mathdefault">A</span>
            </span>
            <span class="svg-align" style="top: -3.68333em;">
                <span class="stretchy" style="height: 0.522em; min-width: 0.888em;">
                    <span class="halfarrow-left" style="height: 0.522em;">
                        <svg width="400em" height="0.522em" class="overline" viewBox="0 0 400000 522" preserveAspectRatio="xMinYMin slice">
                            <path d="M40 281 V428 H0 V94 H40 V241 H400000 v40z M40 281 V428 H0 V94 H40 V241 H400000 v40z"></path>
                        </svg>
                    </span>
                    <span class="halfarrow-right" style="height: 0.522em;">
                        <svg width="400em" height="0.522em" class="underline" viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice">
                            <path d="M399960 241 V94 h40 V428 h-40 V281 H0 v-40z M399960 241 V94 h40 V428 h-40 V281 H0 v-40z"></path>
                        </svg>
                    </span>
                </span>
            </span>
        </span>
    </span>
</span>

function overline(item) {
        input = item.parentNode.parentNode.parentNode.parentNode;
    item.outerHTML = "";
}

@Shubh: I know how to create the function name but doesn't know to store the value in DOM attribute. I am new in Javascript and started to learn JS... — user49758, Jan 21 '19 at 12:52
You can find most of the stuff you need in [this post](https://stackoverflow.com/questions/195951/how-to-change-an-elements-class-with-javascript), hesitated to flag as a direct duplicate BTW. You should precise your question about what's blocking you, as SO is not a tutorial site — Kaddath, Jan 21 '19 at 12:53

score 1 · Answer 1 · answered Jan 21 '19 at 12:54

1

function newoverline()
{
var element=$("svg");

var className = $(element).attr('class');

alert(className);

}

$(document).on('click', '#newline', function(){
newoverline()

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="mord accent">
<span class="vlist-t">
<span class="vlist-r">
<span class="vlist" style="height: 1.20533em;">
<span class="mord">
    <span class="mord mathdefault">A</span>
</span>
<span class="svg-align" style="top: -3.68333em;">
<span class="stretchy" style="height: 0.522em; min-width: 0.888em;">
<span class="halfarrow-left" style="height: 0.522em;">
    <svg width="400em" height="0.522em" class="overline" viewBox="0 0 400000 522" preserveAspectRatio="xMinYMin slice">
    <path d="M40 281 V428 H0 V94 H40 V241 H400000 v40z M40 281 V428 H0 V94 H40 V241 H400000 v40z"></path>
    </svg>
</span>
<span class="halfarrow-right" style="height: 0.522em;">
    <svg width="400em" height="0.522em" class="overline" viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice">
    <path d="M399960 241 V94 h40 V428 h-40 V281 H0 v-40z M399960 241 V94 h40 V428 h-40 V281 H0 v-40z"></path>
    </svg>
</span>
</span>
</span>
</span>
</span>
</span>
</span>

<input type="button" id="newline" value="getValue">

</button>

answered Jan 21 '19 at 12:54

Vivian Mascarenhas

183
1
7

The OP is new in javascript, you should precise that this answer uses jQuery library which they might don't know / use or event want – Kaddath Jan 21 '19 at 13:01
@Vivian: But the class value is any. How to store the value automatically and create the function name based on svg.class. See updated question. – user49758 Jan 21 '19 at 13:02
can you give me details as what you want to achieve. – Vivian Mascarenhas Jan 21 '19 at 13:05
@Vivian: Now the sample `class` value is `overline` and `underline`. I would like to store `svg.class="overline"` value is `$newoverline` and `svg.class="underline"` value is `$newunderline`. But note the `svg.class` value is not only `underline` and `overline`. It will may be anything... I hope you can understand my question. – user49758 Jan 22 '19 at 05:08
@Vivian: Its working fine. But how to set the `for` loop to checking all the `svg` tag? – user49758 Jan 22 '19 at 12:52
@Vivian: One small help and i was tried this last 2 days and not found the solution. After alert the class value i want to remove the class with value. For example `class="overline"` to be remove. How to achieve this? – user49758 Feb 15 '19 at 06:23
@Vivian: I have waiting for your reply. and what is the meaning of `fs[element]()`? – user49758 Feb 20 '19 at 05:37

score 1 · Answer 2 · answered Jan 22 '19 at 14:40

function newoverline()
{

var value=[];

var element=$("svg");


for(i=0;i<element.length;i++){
var className = $(element[i]).attr('class');

value.push("$new"+className);
}

alert(JSON.stringify(value));

}

$(document).on('click', '#newline', function(){
newoverline()

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="mord accent">
<span class="vlist-t">
<span class="vlist-r">
<span class="vlist" style="height: 1.20533em;">
<span class="mord">
    <span class="mord mathdefault">A</span>
</span>
<span class="svg-align" style="top: -3.68333em;">
<span class="stretchy" style="height: 0.522em; min-width: 0.888em;">
<span class="halfarrow-left" style="height: 0.522em;">
    <svg width="400em" height="0.522em" class="overline" viewBox="0 0 400000 522" preserveAspectRatio="xMinYMin slice">
    <path d="M40 281 V428 H0 V94 H40 V241 H400000 v40z M40 281 V428 H0 V94 H40 V241 H400000 v40z"></path>
    </svg>
</span>
<span class="halfarrow-right" style="height: 0.522em;">
    <svg width="400em" height="0.522em" class="underline" viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice">
    <path d="M399960 241 V94 h40 V428 h-40 V281 H0 v-40z M399960 241 V94 h40 V428 h-40 V281 H0 v-40z"></path>
    </svg>
</span>
</span>
</span>
</span>
</span>
</span>
</span>

<input type="button" id="newline" value="getValue">

</button>

I have modified the above code as you said

How to create the function name with `$new`+className` with `for loop`? — user49758, Jan 23 '19 at 05:52
Waiting for your response. How to achieve the $new+className to create function(). Example `function newoverline(){....} and function newunderline(){....}` etc... Thanks. — user49758, Jan 23 '19 at 09:31
i tried but i am not able to find solution the f[element] is used to call the function dynamically. — Vivian Mascarenhas, Feb 20 '19 at 05:48

score 1 · Answer 3 · answered Jan 24 '19 at 04:15

function newoverline()
{

var value=[];

var element=$("svg");


for(i=0;i<element.length;i++){
var className = $(element[i]).attr('class');

value.push("$new"+className);
}

var fs = [];

for(j=0;j<value.length;j++){

var element=value[j];

fs[element] =  new Function(
     "return function " + element + "(){ alert('"+element+"')}"
)();

fs[element]();

}





}

$(document).on('click', '#newline', function(){
newoverline()

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="mord accent">
<span class="vlist-t">
<span class="vlist-r">
<span class="vlist" style="height: 1.20533em;">
<span class="mord">
    <span class="mord mathdefault">A</span>
</span>
<span class="svg-align" style="top: -3.68333em;">
<span class="stretchy" style="height: 0.522em; min-width: 0.888em;">
<span class="halfarrow-left" style="height: 0.522em;">
    <svg width="400em" height="0.522em" class="overline" viewBox="0 0 400000 522" preserveAspectRatio="xMinYMin slice">
    <path d="M40 281 V428 H0 V94 H40 V241 H400000 v40z M40 281 V428 H0 V94 H40 V241 H400000 v40z"></path>
    </svg>
</span>
<span class="halfarrow-right" style="height: 0.522em;">
    <svg width="400em" height="0.522em" class="underline" viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice">
    <path d="M399960 241 V94 h40 V428 h-40 V281 H0 v-40z M399960 241 V94 h40 V428 h-40 V281 H0 v-40z"></path>
    </svg>
</span>
</span>
</span>
</span>
</span>
</span>
</span>

<input type="button" id="newline" value="getValue">

</button>

I have updated as you have specified

Thank you very much. It's working fine as what i have expected. Could you please provide me good JS and Jquery Tutorial link. I have searched many in Web and not found good solution. Now i have very interested to study JS and Jquery. Thanks again Vivian for your immediate help... — user49758, Jan 24 '19 at 07:06
you can refer this https://www.tutorialspoint.com/javascript/ and https://www.tutorialspoint.com/jquery/ — Vivian Mascarenhas, Jan 24 '19 at 09:15

score 1 · Accepted Answer · answered Feb 15 '19 at 08:42

function newoverline()
{
debugger;
var value=[];

var element=$("svg");


for(i=0;i<element.length;i++){
var className = $(element[i]).attr('class');

if(className=="overline"){
$(element[i]).removeAttr("class");
}
if(typeof $(element[i]).attr('class')!="undefined"&&$(element[i]).attr('class')!=undefined){
value.push("$new"+className);
}

}

var fs = [];

for(j=0;j<value.length;j++){

var element=value[j];



fs[element] =  new Function(
     "return function " + element + "(){ alert('"+element+"')}"
)();

fs[element]();

}





}

$(document).on('click', '#newline', function(){
newoverline()

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="mord accent">
<span class="vlist-t">
<span class="vlist-r">
<span class="vlist" style="height: 1.20533em;">
<span class="mord">
    <span class="mord mathdefault">A</span>
</span>
<span class="svg-align" style="top: -3.68333em;">
<span class="stretchy" style="height: 0.522em; min-width: 0.888em;">
<span class="halfarrow-left" style="height: 0.522em;">
    <svg width="400em" height="0.522em" class="overline" viewBox="0 0 400000 522" preserveAspectRatio="xMinYMin slice">
    <path d="M40 281 V428 H0 V94 H40 V241 H400000 v40z M40 281 V428 H0 V94 H40 V241 H400000 v40z"></path>
    </svg>
</span>
<span class="halfarrow-right" style="height: 0.522em;">
    <svg width="400em" height="0.522em" class="underline" viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice">
    <path d="M399960 241 V94 h40 V428 h-40 V281 H0 v-40z M399960 241 V94 h40 V428 h-40 V281 H0 v-40z"></path>
    </svg>
</span>
</span>
</span>
</span>
</span>
</span>
</span>

<input type="button" id="newline" value="getValue">

</button>

I have modified the code

Thanks for your code. But you have first remove the `overline` code and alert only `underline`. But i have would like to alert all the class value within `for` loop then need to remove one by one in `class` value. — user49758, Feb 15 '19 at 09:28
I would like to alert first time `svg.class` value. After that i want to delete `svg.class` value. Next again find `svg.class` second value. — user49758, Feb 15 '19 at 12:21

Finding the DOM attribute with any text and store in variable

4 Answers4