Lite hjälp med Javascript

C, C++, Pascal, Assembly, Raspberry, Java, Matlab, Python, BASIC, SQL, PHP, etc.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Lite hjälp med Javascript

Inlägg av SeniorLemuren »

Denna exempelkod ändrar fontstorleken på den fasta text som ligger mellan p...p. Jag vill i stället mata in texten i en input i stället för den fasta texten. Det var hundra år sedan jag pulade med Javascript och minnet har blivit kortare i min ålder. Kan någon ge mig ett förslag på hur man gör?

Kod: Markera allt

<!DOCTYPE html>
<html>

<body>
    <center>
        <br /><br />
        <div style="padding: 20px; margin: 50px;
			font-size: 20px; border: 5px solid green;" id="container" class="container">
            <p>
                Denna text vill jag ersätta med texten i ett inputfält. Det var hundra år sedan jag pulade med Javascript och minnet är kort i min ålder.
            </p>
        </div>
        <div>
            <h2>Change Font Size</h2>
        </div>
        <input type="range" min="10" max="30" id="slider" onchange="changeSizeBySlider()" value="20" />
    </center>
</body>

</html>

<script>
    var cont = document.getElementById("container");

    function changeSizeBySlider() {
        var slider = document.getElementById("slider");

        // Set slider value as fontSize
        cont.style.fontSize = slider.value + "px";
    }
</script>
MattisLind
Inlägg: 738
Blev medlem: 27 maj 2011, 20:27:12
Ort: Älvsjö
Kontakt:

Re: Lite hjälp med Javascript

Inlägg av MattisLind »

Kan det vara detta du vill göra?

https://www.w3schools.com/js/js_htmldom_html.asp
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Lite hjälp med Javascript

Inlägg av SeniorLemuren »

Inte riktigt, men efter lite sömn så löste jag det själv. Det var inte så svårt när man var utvilad i skallen. Allt verkar vara mer komplicerat mitt i natten. :)
Så här blev det.

Kod: Markera allt

<!DOCTYPE html>
<html>

<body>
    <div>
        <center>
            <br /><br />
            <input type="text" id="container" onchange="changeSizeBySlider()">
    </div>
    </center>

    <div>
        <h2>Change Font Size</h2>
    </div>
    <input type="range" min="10" max="30" id="slider" onchange="changeSizeBySlider()" value="20" />
    </center>
</body>

</html>

<script>
    var cont = document.getElementById("container");

    function changeSizeBySlider() {
        var slider = document.getElementById("slider");

        // Set slider value as fontSize
        cont.style.fontSize = slider.value + "px";
    }
</script>
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Lite hjälp med Javascript

Inlägg av SeniorLemuren »

I föregående lösning så ändrar jag förstås hela inputfältets storlek. Om jag i stället vill komma åt själva texten i inputfältet för att t.ex ändra textfonten eller textfärgen på fonten så blir frågan hur skall det skrivas i ställetför detta

Kod: Markera allt

var cont = document.getElementById("container");
Användarvisningsbild
rvl
Inlägg: 5721
Blev medlem: 5 april 2016, 14:58:53
Ort: Helsingfors

Re: Lite hjälp med Javascript

Inlägg av rvl »

Nånting..?

Kod: Markera allt

<!DOCTYPE html>
<html>

<body>
    <center>
        <br /><br />
        <div style="padding: 20px; margin: 50px;
			font-size: 20px; border: 5px solid green;" id="container" class="container">
            <p id="lemur">
                Denna text vill jag ersätta med texten i ett inputfält. Det var hundra år sedan jag pulade med Javascript och minnet är kort i min ålder.
            </p>
        </div>
        <div>
            <h2>Change Font Size</h2>
        </div>
        <input type="range" min="10" max="30" id="slider" onchange="changeSizeBySlider()" value="20" />
    </center>
    
    <form id="myForm">
  		Ny text: <input type="text" id="nyText" value="Elektronikforumet.com">
	</form>

	<button onclick="myFunction()">Updatera</button>

</body>

</html>

<script>
    var cont = document.getElementById("container");

    function changeSizeBySlider() {
        var slider = document.getElementById("slider");

        // Set slider value as fontSize
        cont.style.fontSize = slider.value + "px";
    }
    
    function myFunction() {
  		var x = document.getElementById("nyText").value;
  		document.getElementById("lemur").innerHTML = x;
	}

</script>
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Lite hjälp med Javascript

Inlägg av SeniorLemuren »

Japp. Jag hade löst det innan jag såg din lösning, de var nästan identiska. skillnaden var att jag uppdaterar automatiskt vid oninput och slipper på så vis knappen. Tackar alla för hjälpen. :)

ps. Vi hade tydligen hittat samma exempelkod med tanke på att myFunction var exakt lika. :)

Kod: Markera allt

<!DOCTYPE html>
<html>

<body>
    <center>
        Skriv text: <input type="text" id="container" value="" oninput="myFunction()">
        <p id="demo"></p>
        <input type="range" min="10" max="30" id="slider" onchange="changeSizeBySlider()" value="20" />
    </center>
</body>

<script>
    var cont = document.getElementById("demo");

    function changeSizeBySlider() {
        var slider = document.getElementById("slider");
        cont.style.fontSize = slider.value + "px";
    }

    function myFunction() {
        var x = document.getElementById("container").value;
        document.getElementById("demo").innerHTML = x;
    }
</script>

</html>
Skriv svar