Question 60916 in Html Question posted in
Some basic documentation can be found here.

How to use triple quotation marks for inline JS in HTML

I have a page where I can’t use <script></script> and I have to place inline JS within the HTML.

I’m having trouble finding a triple quotation to change the css background-image URL via JS where I’m already using single and double quotation marks e.g.

<div onmouseover='document.getElementById("anotherDiv").style.backgroundImage = "url("https://www.test.com/image.jpg")";"></div>

where I need a triple quotation mark to wrap:

url("walrus-assets.s3.amazonaws.com/img/20-test-1.jpg")

Any thoughts?

Tags:

2

Answers


  1. 0

    You don’t need to add quotation for url(), do this

     <div onmouseover="document.getElementById('anotherDiv').style.backgroundImage = 'url(https://www.test.com/image.jpg)'"></div>
    Login or Signup to reply.
  2. 0

    Here is a snippet but as the others say, prefer a css and create a listener in the script tags to change the style like in the second snippet or in the third snippet if the script is in the head tags.

    <div id = "anotherDiv" style="width: 200px; height: 100px; background-color:#995500;"></div>
    <div onmouseover="document.getElementById('anotherDiv').style.backgroundImage='url(https://dummyimage.com/200x100/666666/fff)'" style="cursor: pointer;">mouse over to change the background and use an image.
    </div>

    Second snippet :

            let mOverDiv = document.getElementById("mOverDiv");
        let anotherDiv = document.getElementById("anotherDiv");
        mOverDiv.addEventListener("mouseover", changeStyle);
        function changeStyle(e){
            anotherDiv.style.backgroundImage='url(https://dummyimage.com/200x100/666666/fff)';
        }
            #anotherDiv{
            width:200px;
            height:100px;
            background-color:#996600;
        }
        #mOverDiv{
            cursor:pointer;
        }
        <div id = "anotherDiv"></div>
    <div id = "mOverDiv">text in div</div>

    If your script is declared inside the head section, use this third snippet. Therefore you wait that the content is loaded before to assign the ‘divs’ tags and the listener :

            let mOverDiv;
        let anotherDiv;
        document.addEventListener("DOMContentLoaded",addListener);
        function addListener(e){
            mOverDiv = mOverDiv = document.getElementById("mOverDiv");
            anotherDiv = document.getElementById("anotherDiv");
            mOverDiv.addEventListener("mouseover", changeStyle);
        }
        function changeStyle(e){
            anotherDiv.style.backgroundImage='url(https://dummyimage.com/200x100/666666/fff)';
        }
            #anotherDiv{
            width:200px;
            height:100px;
            background-color:#996600;
        }
        #mOverDiv{
            cursor:pointer;
        }
        <div id = "anotherDiv"></div>
    <div id = "mOverDiv">text in div</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search