Line break with Onclick JavaScript

Navigation
0

I have a function, which when clicking changes an element, but also ends up breaking the line, already tried to solve using preventDefault() , but without success.

When clicked on the fa-user-secret icon, onclick and line break occur

I need to click on the icon, either change the content, and the icon is also working, only this line break occurs. 

// muda tela
var right = document.querySelector("#infoRight").onclick = function() {theRight()};

function theRight() {
    document.querySelector("#infoRight").setAttribute('style', 'display: none;')
    document.querySelector("#infoLeft").setAttribute('style', 'display: block;',)
    document.getElementById("devP").setAttribute('style', 'display: none;')
    document.getElementById("devInfo").setAttribute('style', 'display: block;')
    
}

//volta para home
var left = document.querySelector("#infoLeft").onclick = function() {theLeft()};

function theLeft() {
  document.querySelector("#infoLeft").setAttribute('style', 'display: none;',)
  document.querySelector("#infoRight").setAttribute('style', 'display: block;')
  document.getElementById("devInfo").setAttribute('style', 'display: none;')
  document.getElementById("devP").setAttribute('style', 'display: block;')
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<div id="skillDev" class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                    <p id="iconsHab" class="text-center">
                        <i class="fab fa-js" title="JavaScript"></i>
                        <i class="fab fa-node-js" title="Nodejs"></i>
                        <i class="fab fa-css3-alt" title="CSS3"></i>
                        <i class="fab fa-html5" title="HTML5"></i>
                        <!--Sobre-->
                        <i id="infoRight" class="fas fa-user-secret" title="sobre mim"></i>
                        <i id="infoLeft" class="fas fa-undo-alt" title="voltar"></i>
                        <i class="fab fa-vuejs" title="Vuejs"></i>
                        <i class="fab fa-angular" title="Angular"></i>
                        <i class="fab fa-react" title="Reactjs"></i>
                        <i class="fas fa-coffee" title="Muito Café!! Muito Mesmo"></i>
                    </p>
</div>
    
asked by anonymous 03.08.2018 / 17:48

1 answer

0

You are using 

document.querySelector("#infoRight").setAttribute('style', 'display: block;')

display block causes the line to break.

You switch to inline display 

 document.querySelector("#infoRight").setAttribute('style', 'display : inline;')
    
03.08.2018 / 18:47
Angular Integration 5/6 with Golden Layout Coordinate count in MATLAB