Line breaking with Onclick Javascript

Asked

Viewed 179 times

0

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

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

I need that when clicking on the icon, be it changes the content, and the icon too, everything is 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>

javascript html dom onclick

  • Solved, I changed the property to display: inline-block, the property display: blockdoes not allow setting height and widths.

1 answer

0

You are using the 

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

Block display causes it to break the line.

You switch to inline display

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

  • It does not work, had already tried, because when clicking on the icon, should hide a div and change the icon.

  • It’s not very well explained what you need. What do you really want to do? See the icon? Use jQuery?

  • I just don’t want this line break to happen, all my logic already works, just these details. o hidden and the visibleonly hide, the content, but the divcontinues there, occupying the bounded space. display:block.

  • But which div? in your example the images (tag <i>) are all loose loose from a paragraph, there is no div neither in his code javascript, need to explain this further

  • I edited the answer, I believe that’s what you want

Browser other questions tagged javascript html dom onclick

You are not signed in. Login or sign up in order to post.