Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript JavaScript Bookmarklet bug?

E

emmett

New Coder
Alright so when I add a id tag to a html element
Code: 
 <div id = 'test'>hi<div> [CODE/] and use [CODE] document.querySelector("#hi").style.backgroundColor = "green"; [CODE/], it works.
However, the second I use [CODE] mainwindow.id = 'hi'; [CODE/] in [CODE] const mainWindow = document.createElement("div"); document.body.appendChild(mainWindow); mainwindow.id = 'hi'; [CODE/] it doesn't work! Why is this happening? if you find it out please let me know.

(Sorry for the messy code I'm making a bookmarklet application)
 
Sort by date Sort by votes
emmett said:
Alright so when I add a id tag to a html element
Code: 
 <div id = 'test'>hi<div> [CODE/] and use [CODE] document.querySelector("#hi").style.backgroundColor = "green"; [CODE/], it works.
However, the second I use [CODE] mainwindow.id = 'hi'; [CODE/] in [CODE] const mainWindow = document.createElement("div"); document.body.appendChild(mainWindow); mainwindow.id = 'hi'; [CODE/] it doesn't work! Why is this happening? if you find it out please let me know.

(Sorry for the messy code I'm making a bookmarklet application)
Click to expand...
Hi there,

So off the bat, your first mistake:
Code: 
<div id = 'test'>
this will error out because there is a space between the element attribute, the equals sign, and the value. It should be together like so
Code: 
<div id='test'></div>
there should only be spaces when you are giving the element more than one attribute, like so
Code: 
<div id='test' class='myStyleClass' style='display: none;' ></div>

Also, your query
Code: 
document.querySelector("#hi")
should return nothing because there is no element with the id of 'hi', and because there is no result, your next call to the element style fails.
What you are looking for is
Code: 
var myElement = document.querySelector('#test');
if(typeof myElement != 'undefined' && myElement != null ){
    myElement.style.backgroundColor = 'green';
}

There will be times where you will not be able to access some element attributes with the dot operator, so to get around this, you can do
Code: 
var myElement = document.querySelector('#test');
if(typeof myElement != 'undefined' && myElement != null ){
    myElement.setAtrribute('style', 'background-color: "red" ');
}
 
Upvote 0 Downvote
Antero360 said:
So off the bat, your first mistake:
Code: 
<div id = 'test'>
this will error out because there is a space between the element attribute, the equals sign, and the value. It should be together like so
Click to expand...
Not sure where you get that from ? This actually works fine. You can have as much whitespace around the = as you like. At least in Chrome. Can't test with Edge as it seems to have stopped working 🙄

a.jpg
 
Upvote 0 Downvote
cbreemer said:
Not sure where you get that from ? This actually works fine. You can have as much whitespace around the = as you like. At least in Chrome. Can't test with Edge as it seems to have stopped working 🙄

View attachment 1617
Click to expand...
Although it may not be as actual error, and yes, although it valid on every browser, it is considered bad practice. Not only that, let's remember that whitespace does indeed add to the size of the file, which does contribute to performance hits, even if by a small percentage.

stackoverflow.com

Spaces between html attributes and values?

Are they allowed? and do they work with all browsers? Example: <div role = "region" id = "some-id" class = "a-class another-class">
stackoverflow.com stackoverflow.com

I guess it's up to the dev to consider what is good for them. Unless you are in a work setting where you will definitely get dinged for it in code review
 
Upvote 0 Downvote
Antero360 said:
Although it may not be as actual error, and yes, although it valid on every browser, it is considered bad practice. Not only that, let's remember that whitespace does indeed add to the size of the file, which does contribute to performance hits, even if by a small percentage.

stackoverflow.com

Spaces between html attributes and values?

Are they allowed? and do they work with all browsers? Example: <div role = "region" id = "some-id" class = "a-class another-class">
stackoverflow.com stackoverflow.com

I guess it's up to the dev to consider what is good for them. Unless you are in a work setting where you will definitely get dinged for it in code review
Click to expand...
Why should one be concerned about bandwidth increase due to cosmetic spaces or tabs, seeing the tons of graphics and logos that that nearly every webpage contains, and the high-speed connections most people use ? If bandwidth really is an issue there is always the option to minify the code for production.
I agree that spaces in this particular place are not a common practice, though I can't see why it would be bad practice just because nobody does it.
 
Upvote 0 Downvote
cbreemer said:
Why should one be concerned about bandwidth increase due to cosmetic spaces or tabs, seeing the tons of graphics and logos that that nearly every webpage contains, and the high-speed connections most people use ? If bandwidth really is an issue there is always the option to minify the code for production.
I agree that spaces in this particular place are not a common practice, though I can't see why it would be bad practice just because nobody does it.
Click to expand...
To your point, yes, the graphics/images/logos added nowadays to a page do contribute more to the performance hit, but the more you do to mitigate the performance hit, the better. Granted, with white spaces, we could be talking about a fraction of a fraction of a millisecond, but imagine having an html file with more than 300 lines of code where there is a space between every single attribute, equals sign, and attribute value, those fractional milliseconds add up real quick.


Gotta love it when W3Schools comes in clutch with the best practices :D
www.w3schools.com

HTML Style Guide and Coding Conventions

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
 
Upvote 0 Downvote
Antero360 said:
To your point, yes, the graphics/images/logos added nowadays to a page do contribute more to the performance hit, but the more you do to mitigate the performance hit, the better. Granted, with white spaces, we could be talking about a fraction of a fraction of a millisecond, but imagine having an html file with more than 300 lines of code where there is a space between every single attribute, equals sign, and attribute value, those fractional milliseconds add up real quick.


Gotta love it when W3Schools comes in clutch with the best practices :D
www.w3schools.com

HTML Style Guide and Coding Conventions

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
Click to expand...


I took the liberty of copying the html from my last comment, just the entire article block, and made the space alterations

with spaces
Code: 
<article class = "message message--post  js-post js-inlineModContainer is-unread" data-author = "Antero360" data-content = "post-18583" id = "js-post-18583" style = "opacity: 1;">
  <span class = "u-anchorTarget" id = "post-18583"></span>
  <div class = "message-inner">
    <div class = "message-cell message-cell--user">
      <section itemscope = "" itemtype = "https://schema.org/Person" class = "message-user">
        <div class = "message-avatar message-avatar--online">
          <div class = "message-avatar-wrapper">
            <a href = "/members/antero360.139/" class = "avatar avatar--m" data-user-id = "139" data-xf-init = "member-tooltip" id = "js-XFUniqueId46">
              <img src = "/data/avatars/m/0/139.jpg?1560749359" srcset = "/data/avatars/l/0/139.jpg?1560749359 2x" alt = "Antero360" class = "avatar-u139-m" width = "96" height = "96" loading = "lazy" itemprop = "image">
            </a>
            <span class = "message-avatar-online" tabindex = "0" data-xf-init = "tooltip" data-trigger = "auto" data-original-title = "Online now" id = "js-XFUniqueId47"></span>
          </div>
        </div>
        <div class = "message-userDetails">
          <h4 class = "message-name">
            <a href = "/members/antero360.139/" class = "username " dir = "auto" data-user-id = "139" data-xf-init = "member-tooltip" itemprop = "name" id = "js-XFUniqueId48">
              <span class = "username--style13 username--staff username--moderator">Antero360</span>
            </a>
          </h4>
          <h5 class = "userTitle message-userTitle" dir = "auto" itemprop = "jobTitle">King Coder</h5>
          <div class = "userBanner userBanner userBanner--lightGreen message-userBanner" itemprop = "jobTitle">
            <span class = "userBanner-before"></span>
            <strong>
              <i class = "fal fa-clipboard-user" tooltip = "test"></i> Staff Team </strong>
            <span class = "userBanner-after"></span>
          </div>
          <div class = "userBanner staffModerator message-userBanner" itemprop = "jobTitle">
            <span class = "userBanner-before"></span>
            <strong>
              <i class = "far fa-shield-alt"></i> Security Analyst </strong>
            <span class = "userBanner-after"></span>
          </div>
        </div>
        <span class = "message-userArrow"></span>
      </section>
    </div>
    <div class = "message-cell message-cell--main">
      <div class = "message-main js-quickEditTarget">
        <header class = "message-attribution message-attribution--split">
          <ul class = "message-attribution-main listInline ">
            <li class = "u-concealed">
              <a href = "/threads/javascript-bookmarklet-bug.5294/post-18583" rel = "nofollow">
                <time class = "u-dt" dir = "auto" datetime = "2022-09-06T21:06:02-0500" data-time = "1662516362" data-date-string = "Sep 6, 2022" data-time-string = "9:06 PM" title = "Sep 6, 2022 at 9:06 PM" itemprop = "datePublished">2 minutes ago</time>
              </a>
            </li>
          </ul>
          <ul class = "message-attribution-opposite message-attribution-opposite--list ">
            <li>
              <span class = "message-newIndicator">New</span>
            </li>
            <li>
              <a href = "/threads/javascript-bookmarklet-bug.5294/post-18583" class = "message-attribution-gadget" data-xf-init = "share-tooltip" data-href = "/posts/18583/share" aria-label = "Share" rel = "nofollow" id = "js-XFUniqueId49">
                <i class = "fa--xf fal fa-share-alt" aria-hidden = "true"></i>
              </a>
            </li>
            <li>
              <a href = "/posts/18583/bookmark" class = "bookmarkLink message-attribution-gadget bookmarkLink--highlightable " title = "Bookmark" data-xf-click = "bookmark-click" data-label = ".js-bookmarkText" data-sk-bookmarked = "addClass:is-bookmarked, Edit bookmark" data-sk-bookmarkremoved = "removeClass:is-bookmarked, Add bookmark">
                <span class = "js-bookmarkText u-srOnly">Add bookmark</span>
              </a>
            </li>
            <li>
              <a href = "/threads/javascript-bookmarklet-bug.5294/post-18583" rel = "nofollow"> #6 </a>
            </li>
          </ul>
        </header>
        <div class = "message-content js-messageContent">
          <div class = "message-userContent lbContainer js-lbContainer " data-lb-id = "post-18583" data-lb-caption-desc = "Antero360 · Sep 6, 2022 at 9:06 PM">
            <article class = "message-body js-selectToQuote">
              <div class = "bbWrapper">
                <blockquote data-attributes = "member: 2829" data-quote = "cbreemer" data-source = "post: 18561" class = "bbCodeBlock bbCodeBlock--expandable bbCodeBlock--quote js-expandWatch">
                  <div class = "bbCodeBlock-title">
                    <a href = "/goto/post?id = 18561" class = "bbCodeBlock-sourceJump" rel = "nofollow" data-xf-click = "attribution" data-content-selector = "#post-18561">cbreemer said:</a>
                  </div>
                  <div class = "bbCodeBlock-content">
                    <div class = "bbCodeBlock-expandContent js-expandContent "> Why should one be concerned about bandwidth increase due to cosmetic spaces or tabs, seeing the tons of graphics and logos that that nearly every webpage contains, and the high-speed connections most people use ? If bandwidth really is an issue there is always the option to minify the code for production. <br> I agree that spaces in this particular place are not a common practice, though I can't see why it would be <b>
                        <i>bad</i>
                      </b> practice just because nobody does it. </div>
                    <div class = "bbCodeBlock-expandLink js-expandLink">
                      <a role = "button" tabindex = "0">Click to expand...</a>
                    </div>
                  </div>
                </blockquote>To your point, yes, the graphics/images/logos added nowadays to a page do contribute more to the performance hit, but the more you do to mitigate the performance hit, the better. Granted, with white spaces, we could be talking about a fraction of a fraction of a millisecond, but imagine having an html file with more than 300 lines of code where there is a space between every single attribute, equals sign, and attribute value, those fractional milliseconds add up real quick. <br>
                <br>
                <br> Gotta love it when W3Schools comes in clutch with the best practices <img src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class = "smilie smilie--sprite smilie--sprite8" alt = ":D" title = "Big Grin    :D" loading = "lazy" data-shortname = ":D">
                <br>
                <div class = "bbCodeBlock bbCodeBlock--unfurl    js-unfurl fauxBlockLink" data-unfurl = "true" data-result-id = "6357" data-url = "https://www.w3schools.com/html/html5_syntax.asp" data-host = "www.w3schools.com" data-pending = "false">
                  <div class = "contentRow">
                    <div class = "contentRow-figure contentRow-figure--fixedSmall js-unfurl-figure">
                      <img src = "/proxy.php?image = https%3A%2F%2Fwww.w3schools.com%2Fimages%2Fw3schools_logo_436_2.png&amp;hash = 3a96cc4f088bb6ec782cda6bb46bf9fe&amp;return_error = 1" alt = "www.w3schools.com" data-onerror = "hide-parent">
                    </div>
                    <div class = "contentRow-main">
                      <h3 class = "contentRow-header js-unfurl-title">
                        <a href = "https://www.w3schools.com/html/html5_syntax.asp" class = "link link--external fauxBlockLink-blockLink" target = "_blank" rel = "nofollow ugc noopener" data-proxy-href = "/proxy.php?link = https%3A%2F%2Fwww.w3schools.com%2Fhtml%2Fhtml5_syntax.asp&amp;hash = 4a05fbc2e943d03cfcaffd5c991d958c"> HTML Style Guide and Coding Conventions </a>
                      </h3>
                      <div class = "contentRow-snippet js-unfurl-desc">W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.</div>
                      <div class = "contentRow-minor contentRow-minor--hideLinks">
                        <span class = "js-unfurl-favicon">
                          <img src = "/proxy.php?image = https%3A%2F%2Fwww.w3schools.com%2Ffavicon.ico&amp;hash = ff02419d73efbbca762669d66e9e925a&amp;return_error = 1" alt = "www.w3schools.com" class = "bbCodeBlockUnfurl-icon" data-onerror = "hide-parent">
                        </span> www.w3schools.com
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class = "js-selectToQuoteEnd">&nbsp;</div>
            </article>
          </div>
          <aside class = "message-signature">
            <div class = "bbWrapper">"Never attempt to win by force what can be won by deception." - Niccolo Machiavelli (The Prince) <br> "All warfare is based on deception." - Sun Tzu (The Art of War ) </div>
          </aside>
        </div>
        <footer class = "message-footer">
          <div class = "message-actionBar actionBar">
            <div class = "actionBar-set actionBar-set--external">
              <a href = "/threads/javascript-bookmarklet-bug.5294/reply?quote = 18583" class = "actionBar-action actionBar-action--reply" title = "Reply, quoting this message" rel = "nofollow" data-xf-click = "quote" data-quote-href = "/posts/18583/quote">Reply</a>
            </div>
            <div class = "actionBar-set actionBar-set--internal">
              <span class = "actionBar-action actionBar-action--inlineMod">
                <label class = "iconic iconic--hiddenLabel" data-xf-init = "tooltip" data-original-title = "Select for moderation" id = "js-XFUniqueId50">
                  <input type = "checkbox" value = "18583" class = "js-inlineModToggle">
                  <i aria-hidden = "true"></i>
                  <span class = "iconic-label">
                    <span class = "u-srOnly">Select for moderation</span>
                  </span>
                </label>
              </span>
              <a href = "/posts/18583/report" class = "actionBar-action actionBar-action--report" data-xf-click = "overlay">Report</a>
              <a href = "/posts/18583/edit" class = "actionBar-action actionBar-action--edit actionBar-action--menuItem" data-xf-click = "quick-edit" data-editor-target = "#js-post-18583 .js-quickEditTarget" data-menu-closer = "true">Edit</a>
              <a href = "/posts/18583/delete" class = "actionBar-action actionBar-action--delete actionBar-action--menuItem" data-xf-click = "overlay">Delete</a>
              <a href = "/posts/18583/ip" class = "actionBar-action actionBar-action--ip actionBar-action--menuItem" data-xf-click = "overlay">IP</a>
              <a class = "actionBar-action actionBar-action--menuTrigger" data-xf-click = "menu" title = "More options" role = "button" tabindex = "0" aria-expanded = "false" aria-haspopup = "true">•••</a>
              <div class = "menu" data-menu = "menu" aria-hidden = "true" data-menu-builder = "actionBar">
                <div class = "menu-content">
                  <h4 class = "menu-header">More options</h4>
                  <div class = "js-menuBuilderTarget"></div>
                </div>
              </div>
            </div>
          </div>
          <div class = "reactionsBar js-reactionsList "></div>
          <div class = "js-historyTarget message-historyTarget toggleTarget" data-href = "trigger-href"></div>
        </footer>
      </div>
    </div>
    <div class = "message-cell message-cell--vote">
      <div class = "message-column">
        <div class = "contentVote  js-contentVote " data-xf-init = "content-vote" data-content-id = "post-18583">
          <a href = "javascript:" class = "contentVote-vote is-disabled contentVote-vote--up " data-vote = "up">
            <span class = "u-srOnly">Upvote</span>
          </a>
          <span class = "contentVote-score   js-voteCount" data-score = "0">0</span>
          <a href = "javascript:" class = "contentVote-vote is-disabled contentVote-vote--down " data-vote = "down">
            <span class = "u-srOnly">Downvote</span>
          </a>
        </div>
        <a href = "/posts/18583/mark-solution" class = "solutionIcon  js-solutionControl" data-xf-click = "solution-edit" data-sk-marked = "addClass:is-solution, titleAttr:sync, Unmark as solution" data-sk-removed = "removeClass:is-solution, titleAttr:sync, Mark as solution" data-label = ".u-srOnly" data-xf-init = "tooltip" data-original-title = "Mark as solution" id = "js-XFUniqueId51">
          <span class = "u-srOnly">Mark as solution</span>
        </a>
      </div>
    </div>
  </div>
</article>


without space
Code: 
<article class="message message--post  js-post js-inlineModContainer   is-unread" data-author="Antero360" data-content="post-18583" id="js-post-18583" style="opacity: 1;">
  <span class="u-anchorTarget" id="post-18583"></span>
  <div class="message-inner">
    <div class="message-cell message-cell--user">
      <section itemscope="" itemtype="https://schema.org/Person" class="message-user">
        <div class="message-avatar message-avatar--online">
          <div class="message-avatar-wrapper">
            <a href="/members/antero360.139/" class="avatar avatar--m" data-user-id="139" data-xf-init="member-tooltip" id="js-XFUniqueId46">
              <img src="/data/avatars/m/0/139.jpg?1560749359" srcset="/data/avatars/l/0/139.jpg?1560749359 2x" alt="Antero360" class="avatar-u139-m" width="96" height="96" loading="lazy" itemprop="image">
            </a>
            <span class="message-avatar-online" tabindex="0" data-xf-init="tooltip" data-trigger="auto" data-original-title="Online now" id="js-XFUniqueId47"></span>
          </div>
        </div>
        <div class="message-userDetails">
          <h4 class="message-name">
            <a href="/members/antero360.139/" class="username " dir="auto" data-user-id="139" data-xf-init="member-tooltip" itemprop="name" id="js-XFUniqueId48">
              <span class="username--style13 username--staff username--moderator">Antero360</span>
            </a>
          </h4>
          <h5 class="userTitle message-userTitle" dir="auto" itemprop="jobTitle">King Coder</h5>
          <div class="userBanner userBanner userBanner--lightGreen message-userBanner" itemprop="jobTitle">
            <span class="userBanner-before"></span>
            <strong>
              <i class="fal fa-clipboard-user" tooltip="test"></i> Staff Team </strong>
            <span class="userBanner-after"></span>
          </div>
          <div class="userBanner staffModerator message-userBanner" itemprop="jobTitle">
            <span class="userBanner-before"></span>
            <strong>
              <i class="far fa-shield-alt"></i> Security Analyst </strong>
            <span class="userBanner-after"></span>
          </div>
        </div>
        <span class="message-userArrow"></span>
      </section>
    </div>
    <div class="message-cell message-cell--main">
      <div class="message-main js-quickEditTarget">
        <header class="message-attribution message-attribution--split">
          <ul class="message-attribution-main listInline ">
            <li class="u-concealed">
              <a href="/threads/javascript-bookmarklet-bug.5294/post-18583" rel="nofollow">
                <time class="u-dt" dir="auto" datetime="2022-09-06T21:06:02-0500" data-time="1662516362" data-date-string="Sep 6, 2022" data-time-string="9:06 PM" title="Sep 6, 2022 at 9:06 PM" itemprop="datePublished">2 minutes ago</time>
              </a>
            </li>
          </ul>
          <ul class="message-attribution-opposite message-attribution-opposite--list ">
            <li>
              <span class="message-newIndicator">New</span>
            </li>
            <li>
              <a href="/threads/javascript-bookmarklet-bug.5294/post-18583" class="message-attribution-gadget" data-xf-init="share-tooltip" data-href="/posts/18583/share" aria-label="Share" rel="nofollow" id="js-XFUniqueId49">
                <i class="fa--xf fal fa-share-alt" aria-hidden="true"></i>
              </a>
            </li>
            <li>
              <a href="/posts/18583/bookmark" class="bookmarkLink message-attribution-gadget bookmarkLink--highlightable " title="Bookmark" data-xf-click="bookmark-click" data-label=".js-bookmarkText" data-sk-bookmarked="addClass:is-bookmarked, Edit bookmark" data-sk-bookmarkremoved="removeClass:is-bookmarked, Add bookmark">
                <span class="js-bookmarkText u-srOnly">Add bookmark</span>
              </a>
            </li>
            <li>
              <a href="/threads/javascript-bookmarklet-bug.5294/post-18583" rel="nofollow"> #6 </a>
            </li>
          </ul>
        </header>
        <div class="message-content js-messageContent">
          <div class="message-userContent lbContainer js-lbContainer " data-lb-id="post-18583" data-lb-caption-desc="Antero360 · Sep 6, 2022 at 9:06 PM">
            <article class="message-body js-selectToQuote">
              <div class="bbWrapper">
                <blockquote data-attributes="member: 2829" data-quote="cbreemer" data-source="post: 18561" class="bbCodeBlock bbCodeBlock--expandable bbCodeBlock--quote js-expandWatch">
                  <div class="bbCodeBlock-title">
                    <a href="/goto/post?id=18561" class="bbCodeBlock-sourceJump" rel="nofollow" data-xf-click="attribution" data-content-selector="#post-18561">cbreemer said:</a>
                  </div>
                  <div class="bbCodeBlock-content">
                    <div class="bbCodeBlock-expandContent js-expandContent "> Why should one be concerned about bandwidth increase due to cosmetic spaces or tabs, seeing the tons of graphics and logos that that nearly every webpage contains, and the high-speed connections most people use ? If bandwidth really is an issue there is always the option to minify the code for production. <br> I agree that spaces in this particular place are not a common practice, though I can't see why it would be <b>
                        <i>bad</i>
                      </b> practice just because nobody does it. </div>
                    <div class="bbCodeBlock-expandLink js-expandLink">
                      <a role="button" tabindex="0">Click to expand...</a>
                    </div>
                  </div>
                </blockquote>To your point, yes, the graphics/images/logos added nowadays to a page do contribute more to the performance hit, but the more you do to mitigate the performance hit, the better. Granted, with white spaces, we could be talking about a fraction of a fraction of a millisecond, but imagine having an html file with more than 300 lines of code where there is a space between every single attribute, equals sign, and attribute value, those fractional milliseconds add up real quick. <br>
                <br>
                <br> Gotta love it when W3Schools comes in clutch with the best practices <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite8" alt=":D" title="Big Grin    :D" loading="lazy" data-shortname=":D">
                <br>
                <div class="bbCodeBlock bbCodeBlock--unfurl    js-unfurl fauxBlockLink" data-unfurl="true" data-result-id="6357" data-url="https://www.w3schools.com/html/html5_syntax.asp" data-host="www.w3schools.com" data-pending="false">
                  <div class="contentRow">
                    <div class="contentRow-figure contentRow-figure--fixedSmall js-unfurl-figure">
                      <img src="/proxy.php?image=https%3A%2F%2Fwww.w3schools.com%2Fimages%2Fw3schools_logo_436_2.png&amp;hash=3a96cc4f088bb6ec782cda6bb46bf9fe&amp;return_error=1" alt="www.w3schools.com" data-onerror="hide-parent">
                    </div>
                    <div class="contentRow-main">
                      <h3 class="contentRow-header js-unfurl-title">
                        <a href="https://www.w3schools.com/html/html5_syntax.asp" class="link link--external fauxBlockLink-blockLink" target="_blank" rel="nofollow ugc noopener" data-proxy-href="/proxy.php?link=https%3A%2F%2Fwww.w3schools.com%2Fhtml%2Fhtml5_syntax.asp&amp;hash=4a05fbc2e943d03cfcaffd5c991d958c"> HTML Style Guide and Coding Conventions </a>
                      </h3>
                      <div class="contentRow-snippet js-unfurl-desc">W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.</div>
                      <div class="contentRow-minor contentRow-minor--hideLinks">
                        <span class="js-unfurl-favicon">
                          <img src="/proxy.php?image=https%3A%2F%2Fwww.w3schools.com%2Ffavicon.ico&amp;hash=ff02419d73efbbca762669d66e9e925a&amp;return_error=1" alt="www.w3schools.com" class="bbCodeBlockUnfurl-icon" data-onerror="hide-parent">
                        </span> www.w3schools.com
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="js-selectToQuoteEnd">&nbsp;</div>
            </article>
          </div>
          <aside class="message-signature">
            <div class="bbWrapper">"Never attempt to win by force what can be won by deception." - Niccolo Machiavelli (The Prince) <br> "All warfare is based on deception." - Sun Tzu (The Art of War ) </div>
          </aside>
        </div>
        <footer class="message-footer">
          <div class="message-actionBar actionBar">
            <div class="actionBar-set actionBar-set--external">
              <a href="/threads/javascript-bookmarklet-bug.5294/reply?quote=18583" class="actionBar-action actionBar-action--reply" title="Reply, quoting this message" rel="nofollow" data-xf-click="quote" data-quote-href="/posts/18583/quote">Reply</a>
            </div>
            <div class="actionBar-set actionBar-set--internal">
              <span class="actionBar-action actionBar-action--inlineMod">
                <label class="iconic iconic--hiddenLabel" data-xf-init="tooltip" data-original-title="Select for moderation" id="js-XFUniqueId50">
                  <input type="checkbox" value="18583" class="js-inlineModToggle">
                  <i aria-hidden="true"></i>
                  <span class="iconic-label">
                    <span class="u-srOnly">Select for moderation</span>
                  </span>
                </label>
              </span>
              <a href="/posts/18583/report" class="actionBar-action actionBar-action--report" data-xf-click="overlay">Report</a>
              <a href="/posts/18583/edit" class="actionBar-action actionBar-action--edit actionBar-action--menuItem" data-xf-click="quick-edit" data-editor-target="#js-post-18583 .js-quickEditTarget" data-menu-closer="true">Edit</a>
              <a href="/posts/18583/delete" class="actionBar-action actionBar-action--delete actionBar-action--menuItem" data-xf-click="overlay">Delete</a>
              <a href="/posts/18583/ip" class="actionBar-action actionBar-action--ip actionBar-action--menuItem" data-xf-click="overlay">IP</a>
              <a class="actionBar-action actionBar-action--menuTrigger" data-xf-click="menu" title="More options" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">•••</a>
              <div class="menu" data-menu="menu" aria-hidden="true" data-menu-builder="actionBar">
                <div class="menu-content">
                  <h4 class="menu-header">More options</h4>
                  <div class="js-menuBuilderTarget"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="reactionsBar js-reactionsList "></div>
          <div class="js-historyTarget message-historyTarget toggleTarget" data-href="trigger-href"></div>
        </footer>
      </div>
    </div>
    <div class="message-cell message-cell--vote">
      <div class="message-column">
        <div class="contentVote  js-contentVote " data-xf-init="content-vote" data-content-id="post-18583">
          <a href="javascript:" class="contentVote-vote is-disabled contentVote-vote--up " data-vote="up">
            <span class="u-srOnly">Upvote</span>
          </a>
          <span class="contentVote-score   js-voteCount" data-score="0">0</span>
          <a href="javascript:" class="contentVote-vote is-disabled contentVote-vote--down " data-vote="down">
            <span class="u-srOnly">Downvote</span>
          </a>
        </div>
        <a href="/posts/18583/mark-solution" class="solutionIcon  js-solutionControl" data-xf-click="solution-edit" data-sk-marked="addClass:is-solution, titleAttr:sync, Unmark as solution" data-sk-removed="removeClass:is-solution, titleAttr:sync, Mark as solution" data-label=".u-srOnly" data-xf-init="tooltip" data-original-title="Mark as solution" id="js-XFUniqueId51">
          <span class="u-srOnly">Mark as solution</span>
        </a>
      </div>
    </div>
  </div>
</article>
 
Upvote 0 Downvote
Antero360 said:
which one looks better to you? which one makes the most sense to you? which one would you approve if you were doing code review?
Click to expand...
I wasn't advocating surrounding every equal sign with spaces 😁 Just pointing out that using the occasional white space is neither an error or bad practice, as long as it improves readability (which it obviously does not do so in this extreme case). Personally I neatly tabulate stuff wherever possible, whether in C#, HTML, JS or CSS, which to my mind makes it a hell of a lot easier to understand and maintain. If I were responsible for a commercial website I'd surely minify everything upon deployment. Anyway let's not flog the poor horse any further 😄
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom