How to put Script Editor inside Content Editor?

Question

I have a javascript and in order to work, I have to use Script Editor. The reason why I want to put Script Editor inside Content Editor is because Content Editor are filled with tables, and 1 of the row I want my JavaScript function to be in that row.

This is the code that I put inside Script Editor, and it works:

Radio Button Test: <br>
<input type="radio" name="sex" value="male" id="male"> Male
  <br>
  <input type="radio" name="sex" value="female" id="female"> Female
<p id="demo"></p>

<br>
Drop Down Test:
<select>
  <option value="volvo" id="volvo">Volvo</option>
  <option value="saab" id="saab">Saab</option>
  <option value="opel" id="opel">Opel</option>
  <option value="audi" id="audi">Audi</option>
</select>
<p id="demo2"></p>
<script type="text/javascript">
document.getElementById("male").addEventListener("click", displayMale);
document.getElementById("female").addEventListener("click", displayFemale);

document.getElementById("volvo").addEventListener("click", volvo);
document.getElementById("saab").addEventListener("click", saab);
document.getElementById("opel").addEventListener("click", opel);
document.getElementById("audi").addEventListener("click", audi);

function displayMale() {
    document.getElementById("demo").innerHTML = "i am a male"
}

function displayFemale() {
    document.getElementById("demo").innerHTML = "i am a female"
}

function volvo() {
    document.getElementById("demo2").innerHTML = "i pick volvo"
}

function saab() {
    document.getElementById("demo2").innerHTML = "i pick saab"
}

function opel() {
    document.getElementById("demo2").innerHTML = "i pick opel"
}

function audi() {
    document.getElementById("demo2").innerHTML = "i pick audi"
}
</script>

Is there anyway I could put Script Editor inside Content Editor? If not, is there anyway I could put javascript without Script Editor? I tried using tag but it does not work. Assist me please.

Answer 1

You can put JavaScript in CQWP web part by customization ItemStyle.xsl file.

Add JQuery/any other JavaScript file reference by

<xsl:text disable-output-escaping="yes"> 
    <![CDATA[ 
        <script type="text/javascript" src="/SiteAssets/jquery-1.9.1.min.js"></script> 
    ]]> 
</xsl:text> 

And write your JavaScript by this.

<xsl:text disable-output-escaping="yes"> 
    <![CDATA[ 
        <script type="text/javascript"> 
            //JavaScript code 
        </script> 
    ]]> 
</xsl:text>

Answer 2

You have an option to enter the JavaScript within the Content Editor webpart itself. Try the below steps

• Open your page where you need to insert JavaScript
• Edit the page
• Select the Content Editor webpart where you need to insert JavaScript
• In the Webpart menu, Click on 'Edit Webpart'
• Click on 'Click here to add new content'
• In the Ribbon of the page, under 'FORMAT TEXT' group, Click on 'Edit Source' button
• A window will be opened where you can enter the HTML content of the Original content
• Paste your script there within script tag
• Click 'Ok' and save the page.

Your JavaScript will be inserted into the page.