We help IT Professionals succeed at work.

Bootstrap question

renisenbb
renisenbb asked
on
195 Views
Last Modified: 2017-04-05
I have a span element that showed up as a button.
<span class="button" style="button.gif" href="javascript:TestSubmit('abc')" > MyButton </span>
How do i convert it to Bootstrap?
I've tried
<button class="btn btnPrimary" href="javascript:TestSubmit('abc')" >MyButton</button>
but the javascript doesn't get triggered
Comment
Watch Question

CERTIFIED EXPERT
Distinguished Expert 2017

Commented:
Comments inside the code:
HTML:
<!--I removed the href attr and I set an id-->
<span class="button" id="myButton" style="button.gif"  > MyButton </span>

Open in new window


JQuerycode:
//First I set a variable to span element
var spanElem=document.getElementById('myButton');
//Then I create a button element and define it to a var
var buttonElem=document.createElement('button');
//I set the innerHTML value and the bootstrap class
buttonElem.innerHTML='MyButton';
buttonElem.setAttribute('class', 'btn btnPrimary');
//I use the replaceWith() function to replace the spanElem
//element with the button element.Finally I set a click event
//to span that when I click on it to replace the span element
spanElem.addEventListener('click',function(){
spanElem.replaceWith(buttonElem);
});

Open in new window


PS
I used JQuery replaceWith() function that is more easy and handful .See the replaceWith() documentation
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
Thank you!
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You are welcome.