CODEWITHSUNDEEP
javascriptcsstypography
user3162932
user3162932

Reputation: 3019

Changing style of text to bold

I need help with my code, because everything works except for one thing. After I input text in the three textboxes and click the button, I get a div with the text, but when I click on the text I want only the nummer part to get style="bold", not the whole div.

What's the easiest way to accomplish this, if possible, without putting the nummer text in its own element?

<html>
<head>
    <title>Uppgift 6</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
        var $contact = {};

        $contact.List= function() {
            this.addContact= function(namn ,efternamn, telefon) {
                var cont= new $contact.People(namn, efternamn, telefon)
                document.body.appendChild(cont.element);
            };
        };

        $contact.People= function(namn, efternamn, telefon) {
            this.fNamn= namn;
            this.eNamn= efternamn;
            this.tele= telefon;
            this.element= document.createElement("div");
            this.element.innerHTML= namn+" "+efternamn+" "+telefon;
            var ele= this.element;

            this.element.addEventListener("click", function () {
                ele.style.fontWeight="bold";
            });
        };

        var myList;
        function startUp() {
            myList= new $contact.List();
        }
    </script>
</head>
<body onload="startUp();">
    <form>
        <input type="text" id="fNamn" placeholder="Föramn"/>
        <input type="text" id="eNamn" placeholder="Efternamn"/>
        <input type="text" id="tele" placeholder="Nummer"/>
        <p></p>
        <input type="button"
           onClick="myList.addContact(document.getElementById('fNamn').value,
           document.getElementById('eNamn').value,
           document.getElementById('tele').value);"
           value="Skriv ut"/>
    </form>
</body>
</html>

Upvotes: 0

Views: 108

Answers (2)

ian m
ian m

Reputation: 514

Upload and use a custom font where only the numerals are bold.

Upvotes: 0

Milen Georgiev
Milen Georgiev

Reputation: 512

There is no way to do this - you either work with the div element or you add a new element that has it's own properties you can work with. There is no way to change the properties of only a part of the text in an element.

Upvotes: 1

Related Questions